/* =============================================================================
   EMDUR DESIGN TOKENS — single source of truth for colour, type and shape.
   Companion to BRAND.md. Three layers, as in the Loomel token system:
     PRIMITIVE  — raw values, reference-only, never used on an element.
     SEMANTIC   — purpose aliases; the ONLY layer that branches on theme.
     COMPONENT  — aliases of semantics; what components consume.
   Light-first: the wordmark lives on white. Dark is a full theme, not an inversion.
   Contrast figures below were computed on 2026-10-03 (WCAG 2.x relative luminance).
   ============================================================================= */

/* ---------- LAYER 1: PRIMITIVES (reference-only) -------------------------- */
:root {
  /* the five letter colours, in word order: e m d u r */
  --emdur-sky:      #1FB6E0;
  --emdur-indigo:   #5B5BE6;
  --emdur-saffron:  #F5A623;
  --emdur-emerald:  #22B573;
  --emdur-coral:    #F2545B;

  /* deep variants: the same hues at text strength on white (≥ 4.5:1 unless noted) */
  --emdur-indigo-deep:  #3F3FC9;   /* 7.6:1 on white */
  --emdur-coral-deep:   #C93A42;   /* 5.0:1 on white */
  --emdur-emerald-deep: #178A58;   /* 4.4:1 on white: large text and UI only */
  --emdur-sky-deep:     #0C8DB3;   /* 3.8:1 on white: large text and UI only */
  /* light variant: indigo at text strength on dark */
  --emdur-indigo-light: #8A8AF0;

  /* neutrals, cool-tinted toward indigo */
  --emdur-ink:        #15171C;   /* 17.9:1 on white */
  --emdur-muted:      #646876;   /*  5.6:1 on white */
  --emdur-hairline:   #E3E4EC;
  --emdur-surface:    #F6F7F9;
  --emdur-paper:      #FFFFFF;
  --emdur-off-white:  #EEF0F4;   /* 16.6:1 on canvas-dark */
  --emdur-muted-dark: #A4A8B6;
  --emdur-surface-dark: #161A22;
  --emdur-canvas-dark:  #0E1117;

  /* type */
  --emdur-font-ui: "Inter", system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --emdur-font-doc: "Calibri", "Carlito", "Segoe UI", sans-serif;   /* Word and PDF documents */
  --emdur-font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  --emdur-tracking-caps: 0.28em;   /* the FOUNDRY LIMITED line and other small caps */

  /* shape: the wordmark's own radius language */
  --emdur-radius-sm: 0.5rem;
  --emdur-radius-md: 0.875rem;
  --emdur-radius-tile: 22%;        /* app-icon tile corner, matches icons/ */
  --emdur-radius-pill: 999px;
}

/* ---------- LAYER 2: SEMANTIC — LIGHT (default) --------------------------- */
:root {
  color-scheme: light;
  --bg:            var(--emdur-paper);
  --surface:       var(--emdur-surface);
  --hairline:      var(--emdur-hairline);
  --text-primary:  var(--emdur-ink);
  --text-secondary: var(--emdur-muted);
  --accent:        var(--emdur-indigo-deep);   /* THE one action colour on light: 7.6:1 */
  --accent-soft:   var(--emdur-indigo);        /* fills, chips, large UI: 5.1:1 */
  --accent-ink:    var(--emdur-paper);         /* text on an accent fill: 5.1:1 on indigo, 7.6:1 on deep */
  --focus-ring:    var(--emdur-indigo-deep);
  --positive:      var(--emdur-emerald-deep);
  --warning:       var(--emdur-saffron);       /* 2.0:1 on white: icon with label or fill, never alone as text */
  --danger:        var(--emdur-coral-deep);
}

/* ---------- LAYER 2: SEMANTIC — DARK ----------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            var(--emdur-canvas-dark);
    --surface:       var(--emdur-surface-dark);
    --hairline:      #262A34;
    --text-primary:  var(--emdur-off-white);
    --text-secondary: var(--emdur-muted-dark);
    --accent:        var(--emdur-indigo-light);
    --accent-soft:   var(--emdur-indigo);
    --accent-ink:    var(--emdur-canvas-dark);
    --focus-ring:    var(--emdur-indigo-light);
    --positive:      var(--emdur-emerald);      /* 7.1:1 on canvas-dark */
    --warning:       var(--emdur-saffron);      /* 9.3:1 on canvas-dark */
    --danger:        var(--emdur-coral);        /* 5.6:1 on canvas-dark */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            var(--emdur-canvas-dark);
  --surface:       var(--emdur-surface-dark);
  --hairline:      #262A34;
  --text-primary:  var(--emdur-off-white);
  --text-secondary: var(--emdur-muted-dark);
  --accent:        var(--emdur-indigo-light);
  --accent-soft:   var(--emdur-indigo);
  --accent-ink:    var(--emdur-canvas-dark);
  --focus-ring:    var(--emdur-indigo-light);
  --positive:      var(--emdur-emerald);
  --warning:       var(--emdur-saffron);
  --danger:        var(--emdur-coral);
}

/* ---------- LAYER 3: COMPONENT -------------------------------------------- */
:root {
  --btn-primary-bg:   var(--accent);
  --btn-primary-text: var(--accent-ink);
  --card-bg:          var(--surface);
  --card-border:      var(--hairline);
  --input-bg:         var(--bg);
  --input-border:     var(--hairline);
  --link:             var(--accent);
}

/* ---------- RULES THE TOKENS ENCODE ----------------------------------------
   1. One action colour per view: indigo. The other four letter colours appear only
      in the wordmark, the e icon, and as semantic status (positive, warning, danger).
   2. The five letter colours are never used as running text on white; use the
      deep variants, or put the colour in a fill with ink or paper text on top.
   3. No gradients anywhere. The old cyan-to-indigo gradient is retired.
   4. Body text is never pure black or pure white: ink #15171C and off-white #EEF0F4.
   5. Focus ring ≥ 2px, offset 2px, in --focus-ring; never outline: none without it.
   --------------------------------------------------------------------------- */
body { background: var(--bg); color: var(--text-primary); font-family: var(--emdur-font-ui); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }