/* ============================================================================
   MUNDYAL TECHNOLOGY — DESIGN TOKENS
   Drop this file in and reference the variables. Do not hard-code hex values
   anywhere else; if a colour is missing here, add it here first.

   Layer 1 = primitives (raw values, never used directly in components)
   Layer 2 = semantic  (what a thing means — use these)
   Layer 3 = component (only when a component needs to deviate)
   ============================================================================ */

:root {
  /* ---------- LAYER 1 · PRIMITIVES ---------------------------------------- */

  /* Coral — the mark. Carried forward from the original identity. */
  --mt-coral-50:  #FFF0EF;
  --mt-coral-100: #FFDAD7;
  --mt-coral-300: #FF7A6B;   /* dark grounds */
  --mt-coral-500: #FF5A5A;   /* THE brand colour — the symbol, and nothing else by default */
  --mt-coral-700: #D93838;   /* text and links on light — 4.65:1 on white, passes AA */
  --mt-coral-900: #8F2020;

  /* Neutrals — biased warm/red so they sit with the coral rather than fighting it.
     A pure grey next to this coral reads cold and unconsidered. */
  --mt-ink-900: #1A1718;
  --mt-ink-800: #2B2628;
  --mt-ink-700: #3D3739;
  --mt-ink-600: #565052;
  --mt-ink-500: #6E6668;
  --mt-ink-400: #928A8C;
  --mt-ink-300: #BAB2B4;
  --mt-ink-200: #DBD5D6;
  --mt-ink-100: #EDE9E9;
  --mt-ink-50:  #F6F3F3;
  --mt-paper:   #FBFAFA;
  --mt-white:   #FFFFFF;

  /* Semantic status. NOTE: critical is deliberately NOT the brand coral.
     If errors are coral, every error looks like branding and every logo looks
     like an error. Keep them separate.

     These four are tuned for LIGHT grounds. Every one of them fails WCAG AA on
     the dark canvas (critical is 2.28:1 on --mt-bg-raised, info 2.34:1), so the
     dark blocks below override all four. Use the semantic names, never these
     primitives directly, or dark-mode text will be unreadable. */
  --mt-success:  #1F8A5F;
  --mt-warning:  #A97400;
  --mt-critical: #B3261E;
  --mt-info:     #2A5FA8;

  /* Dark-ground equivalents. Measured against --mt-bg-raised (#2B2628):
     success 6.32:1 · warning 5.35:1 · critical 5.07:1 · info 5.84:1.
     Critical sits at hue 358 where the coral sits at 6 — on a dark canvas any
     legible red is a light red, so the separation from the brand is carried by
     temperature (critical reads cool, coral reads warm) rather than by value.
     Pair error colour with text or an icon; never let colour alone carry it. */
  --mt-success-dark:  #3DBE87;
  --mt-warning-dark:  #C9910F;
  --mt-critical-dark: #FF6166;
  --mt-info-dark:     #6BA6E8;

  /* ---------- LAYER 2 · SEMANTIC (light) ---------------------------------- */
  --mt-bg:            var(--mt-paper);
  --mt-bg-raised:     var(--mt-white);
  --mt-bg-sunken:     var(--mt-ink-50);
  --mt-bg-accent:     var(--mt-coral-50);

  --mt-text:          var(--mt-ink-900);
  --mt-text-muted:    var(--mt-ink-600);
  --mt-text-subtle:   var(--mt-ink-400);
  --mt-text-inverse:  var(--mt-paper);
  --mt-text-accent:   var(--mt-coral-700);

  --mt-border:        var(--mt-ink-200);
  --mt-border-strong: var(--mt-ink-300);

  --mt-brand:         var(--mt-coral-500);
  --mt-action:        var(--mt-coral-700);
  --mt-action-hover:  var(--mt-coral-900);
  --mt-focus:         var(--mt-coral-700);

  /* ---------- TYPE -------------------------------------------------------- */
  /* Figtree and JetBrains Mono are both SIL OFL — free for commercial use,
     self-hostable, no per-seat licence. See README for install. */
  --mt-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mt-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --mt-text-xs:   0.75rem;   /* 12 — labels, legal */
  --mt-text-sm:   0.875rem;  /* 14 — captions, table data */
  --mt-text-base: 1rem;      /* 16 — body */
  --mt-text-lg:   1.125rem;  /* 18 — lead paragraphs */
  --mt-text-xl:   1.5rem;    /* 24 — section headings */
  --mt-text-2xl:  2rem;      /* 32 */
  --mt-text-3xl:  2.75rem;   /* 44 */
  --mt-text-4xl:  3.75rem;   /* 60 — hero only */

  --mt-weight-regular: 400;
  --mt-weight-medium:  500;
  --mt-weight-semibold:600;

  --mt-leading-tight: 1.15;
  --mt-leading-snug:  1.35;
  --mt-leading-body:  1.6;

  --mt-tracking-tight: -0.02em;
  --mt-tracking-normal: 0;
  --mt-tracking-wide:  0.14em;  /* uppercase labels only */

  /* ---------- SPACE (4px base) -------------------------------------------- */
  --mt-space-1:  0.25rem;
  --mt-space-2:  0.5rem;
  --mt-space-3:  0.75rem;
  --mt-space-4:  1rem;
  --mt-space-6:  1.5rem;
  --mt-space-8:  2rem;
  --mt-space-12: 3rem;
  --mt-space-16: 4rem;
  --mt-space-24: 6rem;

  /* ---------- RADIUS + SHADOW --------------------------------------------- */
  --mt-radius-sm:   6px;
  --mt-radius-md:   10px;
  --mt-radius-lg:   16px;
  --mt-radius-full: 9999px;

  --mt-shadow-sm: 0 1px 2px rgba(26, 23, 24, 0.06);
  --mt-shadow-md: 0 4px 12px rgba(26, 23, 24, 0.08);
  --mt-shadow-lg: 0 12px 32px rgba(26, 23, 24, 0.10);

  /* ---------- LOGO -------------------------------------------------------- */
  /* The ring symbol is stroked at 6.5 on a 128 grid — that is 1.63px at 32px,
     and sub-pixel below it. 32 is a hard floor, not a preference. */
  --mt-logo-ring-min:     32px;  /* symbol.svg — below this it smears */
  --mt-logo-lockup-min:   28px;  /* logo-horizontal.svg, measured on the symbol */
  --mt-logo-clearspace:   0.5;   /* multiply by symbol height */
}

/* ---------- LAYER 2 · SEMANTIC (dark) ------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --mt-bg:            var(--mt-ink-900);
    --mt-bg-raised:     var(--mt-ink-800);
    --mt-bg-sunken:     #121011;
    --mt-bg-accent:     rgba(255, 122, 107, 0.12);

    --mt-text:          var(--mt-paper);
    --mt-text-muted:    var(--mt-ink-300);
    --mt-text-subtle:   var(--mt-ink-500);
    --mt-text-inverse:  var(--mt-ink-900);
    --mt-text-accent:   var(--mt-coral-300);

    --mt-border:        var(--mt-ink-700);
    --mt-border-strong: var(--mt-ink-600);

    --mt-brand:         var(--mt-coral-300);
    --mt-action:        var(--mt-coral-300);
    --mt-action-hover:  var(--mt-coral-100);
    --mt-focus:         var(--mt-coral-300);

    --mt-success:       var(--mt-success-dark);
    --mt-warning:       var(--mt-warning-dark);
    --mt-critical:      var(--mt-critical-dark);
    --mt-info:          var(--mt-info-dark);
  }
}

/* Explicit overrides win over the media query in both directions. */
:root[data-theme="dark"] {
  --mt-bg: var(--mt-ink-900);          --mt-bg-raised: var(--mt-ink-800);
  --mt-bg-sunken: #121011;             --mt-bg-accent: rgba(255, 122, 107, 0.12);
  --mt-text: var(--mt-paper);          --mt-text-muted: var(--mt-ink-300);
  --mt-text-subtle: var(--mt-ink-500); --mt-text-inverse: var(--mt-ink-900);
  --mt-text-accent: var(--mt-coral-300);
  --mt-border: var(--mt-ink-700);      --mt-border-strong: var(--mt-ink-600);
  --mt-brand: var(--mt-coral-300);     --mt-action: var(--mt-coral-300);
  --mt-action-hover: var(--mt-coral-100); --mt-focus: var(--mt-coral-300);
  --mt-success: var(--mt-success-dark);   --mt-warning: var(--mt-warning-dark);
  --mt-critical: var(--mt-critical-dark); --mt-info: var(--mt-info-dark);
}
:root[data-theme="light"] {
  --mt-bg: var(--mt-paper);            --mt-bg-raised: var(--mt-white);
  --mt-bg-sunken: var(--mt-ink-50);    --mt-bg-accent: var(--mt-coral-50);
  --mt-text: var(--mt-ink-900);        --mt-text-muted: var(--mt-ink-600);
  --mt-text-subtle: var(--mt-ink-400); --mt-text-inverse: var(--mt-paper);
  --mt-text-accent: var(--mt-coral-700);
  --mt-border: var(--mt-ink-200);      --mt-border-strong: var(--mt-ink-300);
  --mt-brand: var(--mt-coral-500);     --mt-action: var(--mt-coral-700);
  --mt-action-hover: var(--mt-coral-900); --mt-focus: var(--mt-coral-700);
  --mt-success: #1F8A5F;               --mt-warning: #A97400;
  --mt-critical: #B3261E;              --mt-info: #2A5FA8;
}