/* =================================================================
   Lingeva · Design Tokens · v0.1
   The single source of truth for color, type, spacing, radius,
   shadow, motion, and state. Consumed by every screen.
   ================================================================= */

/* ─────────────────────────────────────────────────────────────────
   1 · BASE TYPE & MOTION (mode-agnostic)
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Font stacks */
  --dm-font-serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --dm-font-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dm-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — semantic */
  --dm-type-display:     400 48px/1.05 var(--dm-font-serif);
  --dm-type-h1:          400 32px/1.12 var(--dm-font-serif);
  --dm-type-h2:          400 24px/1.18 var(--dm-font-serif);
  --dm-type-h3:          600 16px/1.4  var(--dm-font-sans);
  --dm-type-eyebrow:     600 11px/1.4  var(--dm-font-sans);
  --dm-type-body:        400 16px/1.55 var(--dm-font-sans);
  --dm-type-body-sm:     400 14px/1.5  var(--dm-font-sans);
  --dm-type-caption:     400 12px/1.45 var(--dm-font-sans);
  --dm-type-mono:        500 12.5px/1.55 var(--dm-font-mono);
  --dm-type-german-lg:   500 24px/1.35 var(--dm-font-sans);   /* key DE sentence in scenario */
  --dm-type-german-body: 400 18px/1.55 var(--dm-font-sans);   /* DE content body */
  --dm-type-button:      600 15px/1.2  var(--dm-font-sans);
  --dm-type-badge:       600 11px/1    var(--dm-font-sans);
  --dm-type-feedback:    500 14px/1.5  var(--dm-font-sans);

  /* Letterspacing tokens */
  --dm-ls-tight: -0.015em;
  --dm-ls-normal: 0;
  --dm-ls-wide:   0.04em;
  --dm-ls-eyebrow: 0.12em;

  /* Spacing (4pt base) */
  --dm-s-1:  4px;
  --dm-s-2:  8px;
  --dm-s-3:  12px;
  --dm-s-4:  16px;
  --dm-s-5:  20px;
  --dm-s-6:  24px;
  --dm-s-7:  32px;
  --dm-s-8:  40px;
  --dm-s-9:  48px;
  --dm-s-10: 64px;
  --dm-s-11: 80px;

  /* Semantic spacing */
  --dm-page-pad-mobile:  20px;   /* horizontal page padding on phones */
  --dm-page-pad-desktop: 48px;
  --dm-card-pad:         16px;   /* default card inner padding */
  --dm-card-pad-lg:      20px;   /* featured cards */
  --dm-section-gap:      32px;   /* between dashboard bands */
  --dm-stack-gap:        12px;   /* between sibling items in a list */

  /* Radius */
  --dm-r-xs:   4px;
  --dm-r-sm:   6px;
  --dm-r-md:   10px;
  --dm-r-lg:   14px;
  --dm-r-xl:   20px;
  --dm-r-card: var(--dm-r-lg);
  --dm-r-button: 999px;        /* pill */
  --dm-r-badge:  999px;
  --dm-r-mic:    999px;        /* always circular */

  /* Touch targets */
  --dm-tap-min: 44px;          /* WCAG floor */
  --dm-tap-comfy: 48px;        /* preferred */
  --dm-mic-size-mobile: 88px;  /* mic primary affordance */
  --dm-mic-size-desktop: 96px;

  /* Motion — ease */
  --dm-ease-default: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dm-ease-in:      cubic-bezier(0.4, 0,   1,   1);
  --dm-ease-out:     cubic-bezier(0,   0,   0.2, 1);

  /* Motion — duration */
  --dm-d-fast:   120ms;
  --dm-d-base:   200ms;
  --dm-d-slow:   320ms;
  --dm-d-pulse:  1400ms;       /* mic recording pulse */
  --dm-d-feedback: 240ms;      /* feedback reveal */

  /* Z-index */
  --dm-z-base:    0;
  --dm-z-raised:  10;
  --dm-z-sticky:  100;
  --dm-z-tabbar:  200;
  --dm-z-modal:   1000;
  --dm-z-toast:   1100;
}


/* ─────────────────────────────────────────────────────────────────
   2 · LIGHT MODE (default)
   ───────────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Surfaces */
  --dm-canvas:        #faf7f1;   /* warm paper */
  --dm-surface:       #ffffff;
  --dm-surface-raised:#ffffff;
  --dm-surface-sunken:#f3efe6;   /* input fields, code blocks */
  --dm-overlay:       rgba(20, 17, 12, 0.5);

  /* Text */
  --dm-ink:    #1c1815;          /* primary — warm near-black */
  --dm-ink-2:  #5a5147;          /* secondary */
  --dm-ink-3:  #8a8074;          /* muted */
  --dm-ink-on-accent: #ffffff;
  --dm-ink-on-brass:  #1c1815;   /* dark text on brass */

  /* Lines */
  --dm-line:   #e6dfd1;
  --dm-line-2: #d4cab8;

  /* Brand & action */
  --dm-brass:        #c4924a;    /* primary action / mic / CTAs */
  --dm-brass-hover:  #b07f3a;
  --dm-brass-press:  #9c6e2e;
  --dm-brass-tint:   rgba(196, 146, 74, 0.10);

  --dm-ink-deep:     #2b2a35;    /* secondary brand — grammar/links */
  --dm-ink-deep-hover:#3b4063;
  --dm-ink-deep-tint:rgba(43, 42, 53, 0.06);

  /* Semantic state */
  --dm-ok:     #6d8a52;          /* warm sage — "strong" */
  --dm-ok-tint:rgba(109, 138, 82, 0.10);
  --dm-warn:   #c89346;          /* amber */
  --dm-warn-tint:rgba(200, 147, 70, 0.10);
  --dm-danger: #b8523f;          /* warm clay */
  --dm-danger-tint:rgba(184, 82, 63, 0.10);
  --dm-info:   #5a6da6;          /* muted indigo */
  --dm-info-tint:rgba(90, 109, 166, 0.10);
  --dm-muted:  #8a8074;
  --dm-locked: #b6ad9f;

  /* CEFR level swatches */
  --dm-level-a1: #7a9b5e;        /* sage */
  --dm-level-a2: #c89346;        /* amber */
  --dm-level-b1: #c47a3a;        /* burnt orange */
  --dm-level-b2: #5a6da6;        /* indigo */
  --dm-level-c1: #c0392b;        /* warm red, aligned with Grammar C1 */

  /* Mastery state — visual scale (fill density via opacity) */
  --dm-mastery-0: #d4cab8;       /* unseen — line color */
  --dm-mastery-1: rgba(196, 146, 74, 0.28);
  --dm-mastery-2: rgba(196, 146, 74, 0.52);
  --dm-mastery-3: rgba(196, 146, 74, 0.78);
  --dm-mastery-4: var(--dm-brass);

  /* Mic states */
  --dm-mic-idle-bg:     var(--dm-brass);
  --dm-mic-idle-ink:    var(--dm-ink-on-brass);
  --dm-mic-listening-bg:#9c6e2e;
  --dm-mic-listening-glow: 0 0 0 12px rgba(196, 146, 74, 0.18);
  --dm-mic-processing-bg:var(--dm-ink-deep);
  --dm-mic-error-bg:    var(--dm-danger);
  --dm-mic-muted-bg:    var(--dm-line-2);

  /* Shadows — warm, low-spread, never blue */
  --dm-shadow-soft:    0 1px 2px rgba(60, 45, 25, 0.06);
  --dm-shadow-card:    0 2px 8px rgba(60, 45, 25, 0.08);
  --dm-shadow-raised:  0 8px 24px rgba(60, 45, 25, 0.10);
  --dm-shadow-mic:     0 6px 20px rgba(196, 146, 74, 0.34);
  --dm-shadow-modal:   0 24px 60px rgba(20, 17, 12, 0.28);

  /* Focus ring (accessibility) */
  --dm-focus-ring: 0 0 0 3px rgba(90, 109, 166, 0.45);
}


/* ─────────────────────────────────────────────────────────────────
   3 · DARK MODE
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Surfaces */
  --dm-canvas:         #14110d;  /* warm coffee black */
  --dm-surface:        #1c1814;
  --dm-surface-raised: #221d18;
  --dm-surface-sunken: #100e0a;
  --dm-overlay:        rgba(0, 0, 0, 0.6);

  /* Text */
  --dm-ink:    #ece5d6;          /* warm chalk */
  --dm-ink-2:  #b6ad9c;
  --dm-ink-3:  #7f7768;
  --dm-ink-on-accent: #14110d;
  --dm-ink-on-brass:  #14110d;

  /* Lines */
  --dm-line:   #2a241e;
  --dm-line-2: #3a322a;

  /* Brand & action — same hues, slightly brighter for dark */
  --dm-brass:        #d4a55e;
  --dm-brass-hover:  #e0b370;
  --dm-brass-press:  #c4924a;
  --dm-brass-tint:   rgba(212, 165, 94, 0.12);

  --dm-ink-deep:      #c4cbe6;   /* on dark, becomes a soft sky-ink */
  --dm-ink-deep-hover:#d4dbf0;
  --dm-ink-deep-tint: rgba(196, 203, 230, 0.08);

  /* Semantic state */
  --dm-ok:     #94b074;
  --dm-ok-tint:rgba(148, 176, 116, 0.12);
  --dm-warn:   #d4a55e;
  --dm-warn-tint:rgba(212, 165, 94, 0.12);
  --dm-danger: #d96a57;
  --dm-danger-tint:rgba(217, 106, 87, 0.12);
  --dm-info:   #8a9bd0;
  --dm-info-tint:rgba(138, 155, 208, 0.12);
  --dm-muted:  #7f7768;
  --dm-locked: #4a4338;

  /* CEFR level swatches */
  --dm-level-a1: #94b074;
  --dm-level-a2: #d4a55e;
  --dm-level-b1: #d49058;
  --dm-level-b2: #8a9bd0;
  --dm-level-c1: #e05555;        /* warm red, aligned with Grammar C1 */

  /* Mastery */
  --dm-mastery-0: #3a322a;
  --dm-mastery-1: rgba(212, 165, 94, 0.28);
  --dm-mastery-2: rgba(212, 165, 94, 0.52);
  --dm-mastery-3: rgba(212, 165, 94, 0.78);
  --dm-mastery-4: var(--dm-brass);

  /* Mic */
  --dm-mic-idle-bg:     var(--dm-brass);
  --dm-mic-idle-ink:    var(--dm-ink-on-brass);
  --dm-mic-listening-bg:#e0b370;
  --dm-mic-listening-glow: 0 0 0 12px rgba(212, 165, 94, 0.24);
  --dm-mic-processing-bg:#c4cbe6;
  --dm-mic-error-bg:    var(--dm-danger);
  --dm-mic-muted-bg:    var(--dm-line-2);

  /* Shadows — bigger, blacker in dark */
  --dm-shadow-soft:    0 1px 2px rgba(0, 0, 0, 0.35);
  --dm-shadow-card:    0 2px 10px rgba(0, 0, 0, 0.4);
  --dm-shadow-raised:  0 12px 32px rgba(0, 0, 0, 0.5);
  --dm-shadow-mic:     0 6px 24px rgba(212, 165, 94, 0.36);
  --dm-shadow-modal:   0 30px 80px rgba(0, 0, 0, 0.7);

  --dm-focus-ring: 0 0 0 3px rgba(138, 155, 208, 0.55);
}


/* ─────────────────────────────────────────────────────────────────
   4 · SYSTEM PREFERENCE — honoured unless user has set [data-theme]
   ───────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Mirror the dark block above. Codex: keep in sync. */
    --dm-canvas:#14110d; --dm-surface:#1c1814; --dm-surface-raised:#221d18; --dm-surface-sunken:#100e0a;
    --dm-overlay: rgba(0,0,0,0.6);
    --dm-ink:#ece5d6; --dm-ink-2:#b6ad9c; --dm-ink-3:#7f7768; --dm-ink-on-accent:#14110d; --dm-ink-on-brass:#14110d;
    --dm-line:#2a241e; --dm-line-2:#3a322a;
    --dm-brass:#d4a55e; --dm-brass-hover:#e0b370; --dm-brass-press:#c4924a; --dm-brass-tint:rgba(212,165,94,0.12);
    --dm-ink-deep:#c4cbe6;
    --dm-ok:#94b074; --dm-warn:#d4a55e; --dm-danger:#d96a57; --dm-info:#8a9bd0;
    --dm-level-a1:#94b074; --dm-level-a2:#d4a55e; --dm-level-b1:#d49058; --dm-level-b2:#8a9bd0; --dm-level-c1:#e05555;
    --dm-mastery-0:#3a322a;
    --dm-shadow-soft:0 1px 2px rgba(0,0,0,0.35); --dm-shadow-card:0 2px 10px rgba(0,0,0,0.4);
    --dm-shadow-raised:0 12px 32px rgba(0,0,0,0.5); --dm-shadow-mic:0 6px 24px rgba(212,165,94,0.36);
  }
}


/* ─────────────────────────────────────────────────────────────────
   5 · RESET HOOKS (optional — Codex may already have these)
   ───────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "ss01", "cv11";   /* Inter humanist features for DE clarity */
}
body {
  background: var(--dm-canvas);
  color: var(--dm-ink);
  font: var(--dm-type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*:focus-visible {
  outline: none;
  box-shadow: var(--dm-focus-ring);
  border-radius: var(--dm-r-sm);
}