/* Elia AI design tokens. Source of truth: design.md. Do not add a sixth brand colour. */

:root {
  /* Brand, five colours, no sixth */
  --color-ink:            #0F1D2E;
  --color-ink-elevated:   #1B2E45;
  --color-sand:           #D9C9AC;
  --color-linen:          #F5F0E6;
  --color-ember:          #FF5A36;

  /* Derived from Ink. Structural neutrals, never accents. */
  --color-ink-deep:       #0A1420;
  --color-ink-line:       #263D59;
  --color-ink-slate:      #435770;
  --color-ink-mist:       #758AA3;
  --color-ink-haze:       #A9B6C6;
  --color-sand-wash:      #1F2B38;
  --color-linen-sunken:   #ECE8DF;
  --color-linen-line:     #D9D7D0;

  /* Semantic aliases, dark register */
  --text-on-dark:           var(--color-linen);
  --text-on-dark-secondary: var(--color-sand);
  --text-on-dark-muted:     var(--color-ink-mist);
  --border-on-dark:         var(--color-ink-line);

  /* Semantic aliases, light register */
  --text-on-light:          var(--color-ink);
  --text-on-light-body:     var(--color-ink-slate);
  --text-on-light-disabled: var(--color-ink-haze);
  --border-on-light:        var(--color-linen-line);

  /* Accent. Ember always carries Ink as its label colour. */
  --accent:                 var(--color-ember);
  --accent-label:           var(--color-ink);
  --accent-hover:           color-mix(in oklab, var(--color-linen) 12%, var(--color-ember));
  --accent-active:          color-mix(in oklab, var(--color-ink)   10%, var(--color-ember));

  /* Font families */
  --font-display: 'Space Grotesk', 'Sora', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-stat:          clamp(44px, 5.4vw, 64px);
  --leading-stat:       1.05;
  --tracking-stat:      -0.020em;

  --text-display:       clamp(36px, 4.6vw, 56px);
  --leading-display:    1.15;
  --tracking-display:   -0.015em;

  --text-heading-lg:    clamp(32px, 3.6vw, 44px);
  --leading-heading-lg: 1.18;
  --tracking-heading-lg:-0.014em;

  --text-heading:       clamp(28px, 3.0vw, 36px);
  --leading-heading:    1.22;
  --tracking-heading:   -0.012em;

  --text-heading-sm:    clamp(24px, 2.4vw, 28px);
  --leading-heading-sm: 1.28;
  --tracking-heading-sm:-0.010em;

  --text-subheading:    22px;
  --leading-subheading: 1.36;
  --tracking-subheading:-0.006em;

  --text-body-lg:       18px;
  --leading-body-lg:    1.60;

  --text-body:          16px;
  --leading-body:       1.60;

  --text-body-sm:       14px;
  --leading-body-sm:    1.57;
  --tracking-body-sm:   0.005em;

  --text-caption:       13px;
  --leading-caption:    1.54;
  --tracking-caption:   0.005em;

  --text-mono-sm:       13px;
  --leading-mono-sm:    1.54;
  --tracking-mono-sm:   0.060em;

  --text-micro:         11px;
  --leading-micro:      1.45;
  --tracking-micro:     0.080em;

  /* Weights. 300 on dark, 400 on light, for display only. */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* Spacing */
  --spacing-4:   4px;
  --spacing-8:   8px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-40:  40px;
  --spacing-48:  48px;
  --spacing-64:  64px;
  --spacing-80:  80px;
  --spacing-96:  96px;
  --spacing-120: 120px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width:     1200px;
  --content-max-width:  68ch;
  --headline-max-width: 22ch;
  --section-gap:        96px;
  --band-gap:           120px;
  --card-padding:       20px;
  --card-padding-lg:    24px;
  --element-gap:        10px;
  --gutter:             24px;

  /* Radius. Three values. */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-dot: 50%;

  /* Surfaces */
  --surface-0:  var(--color-ink-deep);
  --surface-1:  var(--color-ink);
  --surface-2:  var(--color-ink-elevated);
  --surface-3:  var(--color-sand-wash);
  --surface-l0: var(--color-linen-sunken);
  --surface-l1: var(--color-linen);

  /* Motion, easing */
  --ease-signal: cubic-bezier(0.2, 0, 0, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emit:   cubic-bezier(0.4, 0, 0.6, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 1, 1);

  /* Motion, duration. Deliberately non harmonic so loops never synchronise. */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-draw:    640ms;
  --dur-resolve: 720ms;
  --dur-sweep:   900ms;
  --dur-caret:   1100ms;
  --dur-ping:    1400ms;
  --dur-pulse:   1800ms;
  --stagger:     70ms;
}

/* Base document defaults. NOT scoped to a locale.
   This rule was html[lang="tr"] body, written when Turkish was the only
   locale. The moment the toggle became real, switching lang to "en" dropped
   the body font, size, line-height, colour, background and margin in one go
   -- the whole page reverting to UA defaults, invisible in the source and
   catastrophic in the paint. The Inter disambiguation set stays on in both
   locales deliberately: it is motivated by Turkish dotless i, and turning it
   off for English would make the two locales render the same glyphs
   differently for no gain. */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "ss02" 1, "cv05" 1;
  text-wrap: pretty;
  overflow-wrap: break-word;
  color: var(--text-on-dark);
  background: var(--color-ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* hyphens is the ONE genuinely Turkish-specific property in the block above,
   and design.md names it as such: a progressive enhancement for Turkish, with
   overflow-wrap as the guaranteed floor for everyone. Left switched on for
   English it broke "architecture" across two lines in the hero subhead --
   correct hyphenation, wrong register for a headline-adjacent paragraph. */
/* Any Turkish-marked subtree, not just a Turkish-rooted document: the legal
   pages pin lang="tr" on the document body while the chrome around them may
   be in English. */
[lang="tr"] { hyphens: auto; }
/* And back off again inside it. hyphens inherits, so the English note sitting
   in a Turkish document was picking up Turkish hyphenation -- the same defect,
   one level down, that switching the whole page to English produced. The pair
   reads as one decision: hyphenate Turkish, hyphenate nothing else. */
[lang="en"] { hyphens: manual; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
}

.on-dark h1, .on-dark h2 { font-weight: var(--weight-light); }
.on-light h1, .on-light h2 { font-weight: var(--weight-regular); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}