/**
 * Inter.
 * Used in the chart SVG.
 * https://gwfh.mranftl.com/fonts/inter?subsets=latin
 */
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --color-white: white;
    --color-brand-blue-darkest: #0c233c;
    --color-pink-surface: #ffa6a4;
    --color-pink-border: #774d4d;
    --color-yellow-surface: #f9f685;
    --color-yellow-border: #666621;
    --color-brown-surface: #e5c7a1;
    --color-brown-border: #4c4236;
    --color-green-surface: #aaffa8;
    --color-green-border: #3a5639;
    
    /**
     * Semantic.
     */
    --color-personality: var(--color-text-chart-personality);
    --color-design: var(--color-text-chart-design);

    --color-gate-label-bg: transparent;
    --color-gate-label-text: var(--color-brand-blue-darkest);
    --color-gate-label-activated-bg: var(--color-brand-blue-darkest);
    --color-gate-label-activated-text: var(--color-white);

    --color-center-head-surface: var(--color-yellow-surface);
    --color-center-head-border: var(--color-yellow-border);
    --color-center-ajna-surface: var(--color-green-surface);
    --color-center-ajna-border: var(--color-green-border);
    --color-center-throat-surface: var(--color-brown-surface);
    --color-center-throat-border: var(--color-brown-border);
    --color-center-g-center-surface: var(--color-yellow-surface);
    --color-center-g-center-border: var(--color-yellow-border);
    --color-center-sacral-surface: var(--color-pink-surface);
    --color-center-sacral-border: var(--color-pink-border);
    --color-center-root-surface: var(--color-brown-surface);
    --color-center-root-border: var(--color-brown-border);
    --color-center-spleen-surface: var(--color-brown-surface);
    --color-center-spleen-border: var(--color-brown-border);
    --color-center-solar-plexus-surface: var(--color-brown-surface);
    --color-center-solar-plexus-border: var(--color-brown-border);
    --color-center-ego-surface: var(--color-pink-surface);
    --color-center-ego-border: var(--color-pink-border);
}

.personality-fill {
    fill: var(--color-personality);
}

.design-fill {
    fill: var(--color-design);
}

/**
 * Centers.
 */
#center-head {
    &.is-defined {
        fill: var(--color-center-head-surface);
        stroke: var(--color-center-head-border);
    }
}

#center-ajna {
    &.is-defined {
        fill: var(--color-center-ajna-surface);
        stroke: var(--color-center-ajna-border);
    }
}

#center-throat {
    &.is-defined {
        fill: var(--color-center-throat-surface);
        stroke: var(--color-center-throat-border);
    }
}

#center-g-center {
    &.is-defined {
        fill: var(--color-center-g-center-surface);
        stroke: var(--color-center-g-center-border);
    }
}

#center-sacral {
    &.is-defined {
        fill: var(--color-center-sacral-surface);
        stroke: var(--color-center-sacral-border);
    }
}

#center-root {
    &.is-defined {
        fill: var(--color-center-root-surface);
        stroke: var(--color-center-root-border);
    }
}

#center-spleen {
    &.is-defined {
        fill: var(--color-center-spleen-surface);
        stroke: var(--color-center-spleen-border);
    }
}

#center-solar-plexus {
    &.is-defined {
        fill: var(--color-center-solar-plexus-surface);
        stroke: var(--color-center-solar-plexus-border);
    }
}

#center-ego {
    &.is-defined {
        fill: var(--color-center-ego-surface);
        stroke: var(--color-center-ego-border);
    }
}

/**
 * Gates.
 */
#gate-labels {
    .gate_label_bg {
        fill: var(--color-gate-label-bg);
    }

    text {
        fill: var(--color-gate-label-text);
    }

    .is-activated .gate_label_bg {
        fill: var(--color-gate-label-activated-bg);
    }

    .is-activated text {
        fill: var(--color-gate-label-activated-text);
    }
}

#gates .is-activated-personality {
    stroke: var(--color-personality);
}

#gates .is-activated-design {
    stroke: var(--color-design);
}

/**
 * Chiron.
 * Hidden by default to prevent FOUC.
 */
#design-chiron-icon,
#design-chiron-activation,
#personality-chiron-icon,
#personality-chiron-activation {
    display: none;
}

#design-chiron-icon.chiron-is-visible,
#design-chiron-activation.chiron-is-visible,
#personality-chiron-icon.chiron-is-visible,
#personality-chiron-activation.chiron-is-visible {
    display: block;
}

/**
 * Variables.
 */

/* Hide all arrows. */
#variable-digestion-r, #variable-digestion-l,
#variable-environment-r, #variable-environment-l,
#variable-awareness-r, #variable-awareness-l,
#variable-perspective-r, #variable-perspective-l {
    display: none;
}

/* Show relevant arrows. */
#variables.is-digestion-l #variable-digestion-l,
#variables.is-digestion-r #variable-digestion-r,
#variables.is-environment-l #variable-environment-l,
#variables.is-environment-r #variable-environment-r,
#variables.is-awareness-l #variable-awareness-l,
#variables.is-awareness-r #variable-awareness-r,
#variables.is-perspective-l #variable-perspective-l,
#variables.is-perspective-r #variable-perspective-r {
    display: inline;
}

/* Hide numbers. */
.is-basic #variables text {
    display: none;
}