/* ============================================================
   LUMEN DESIGN SYSTEM — Core Tokens
   Typography + color for a calm, premium language-learning tool.
   Two themes: warm paper (default) and dark premium.
   ============================================================ */

/* ------------------------------------------------------------
   FONTS — self-hosted via assets/fonts/
   • Display: GT Sectra-adjacent; substituted Fraunces (Google Fonts)
     — flagged in README; awaiting licensed file.
   • Body: Söhne-adjacent; substituted Inter Tight for tighter
     tracking and a more specific feel than plain Inter.
   • Mono: Berkeley Mono-adjacent; substituted JetBrains Mono.
   • CJK: Noto Serif JP for Japanese display, Noto Sans JP for body.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+JP:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* ========== TYPE FAMILIES ========== */
  --font-display: 'Fraunces', 'Noto Serif JP', 'Times New Roman', serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-jp-display: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-jp-body:    'Noto Sans JP', 'Hiragino Sans', sans-serif;

  /* ========== TYPE SCALE ========== */
  /* Modest geometric scale (1.2x) — readable, not noisy. */
  --fs-12:  0.75rem;    /* 12px — meta, captions */
  --fs-13:  0.8125rem;  /* 13px — labels */
  --fs-14:  0.875rem;   /* 14px — secondary body */
  --fs-15:  0.9375rem;  /* 15px — dense UI */
  --fs-16:  1rem;       /* 16px — body default */
  --fs-18:  1.125rem;   /* 18px — large body, card titles */
  --fs-20:  1.25rem;    /* 20px — h4 */
  --fs-24:  1.5rem;     /* 24px — h3 */
  --fs-30:  1.875rem;   /* 30px — h2 */
  --fs-40:  2.5rem;     /* 40px — h1 */
  --fs-56:  3.5rem;     /* 56px — hero display */
  --fs-80:  5rem;       /* 80px — giant flashcard type */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;
  --lh-loose:   1.75;

  /* Letter spacing — serif display wants negative, small caps want positive */
  --ls-tightest: -0.03em;
  --ls-tight:    -0.015em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-widest:    0.12em;  /* eyebrow labels */

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ========== SEMANTIC TYPE (for use via utility classes below) ========== */
  /* Use the .t-* utility classes at the bottom, or apply these as mixins. */

  /* ========== COLOR — WARM PAPER (LIGHT, default) ==========
     Palette logic:
     • Paper cream backgrounds, deep warm-ink foregrounds.
     • A single reserved accent (Ember) for primary action + brand.
     • Semantic colors (success/warn/danger) are muted, never neon.
     ================================================================= */

  /* Neutrals — warm, paper-adjacent */
  --paper-0:   #FDFCF8;  /* lightest — app canvas */
  --paper-50:  #F7F4EC;  /* subtle surface */
  --paper-100: #EFEBE0;  /* hover, track, inline code bg */
  --paper-200: #E4DECE;  /* borders strong */
  --paper-300: #C9C1AC;  /* muted text, disabled */
  --paper-400: #9A927D;  /* tertiary text */
  --paper-500: #6E6758;  /* secondary text */
  --paper-600: #4A4538;  /* body strong */
  --paper-700: #2E2B22;  /* primary text (not black) */
  --paper-800: #1C1A14;  /* highest-contrast text */
  --paper-900: #0F0E0A;  /* absolute ink */

  /* Ember — the ONE brand accent. Warm, confident, not red. */
  --ember-50:  #FDF0E7;
  --ember-100: #FADCC5;
  --ember-200: #F4B98A;
  --ember-300: #EC9553;
  --ember-400: #D97628;
  --ember-500: #B85A15;  /* primary — AA on paper-0 */
  --ember-600: #944511;
  --ember-700: #6E340D;
  --ember-800: #482209;

  /* Semantic — desaturated, paper-compatible */
  --success-bg:   #E8EFDF;
  --success-fg:   #4A6B2A;
  --success-line: #9BB177;

  --warn-bg:   #F5E9CC;
  --warn-fg:   #7A5A0E;
  --warn-line: #C9A547;

  --danger-bg:   #F3DED6;
  --danger-fg:   #8A3318;
  --danger-line: #C26A4D;

  --info-bg:   #E3E6EC;
  --info-fg:   #3A4660;
  --info-line: #7E8CA8;

  /* SRS ease-grade colors (Again / Hard / Good / Easy) — premium, calm */
  --srs-again: #B34A36;  /* terracotta */
  --srs-hard:  #B8822A;  /* ochre */
  --srs-good:  #4A7B5A;  /* sage */
  --srs-easy:  #3A6279;  /* slate blue */

  /* ========== SEMANTIC ROLES (light) ========== */
  --bg-app:        var(--paper-0);
  --bg-surface:    #FFFFFF;
  --bg-subtle:     var(--paper-50);
  --bg-muted:      var(--paper-100);
  --bg-inverse:    var(--paper-800);

  --fg-default:    var(--paper-700);
  --fg-strong:     var(--paper-800);
  --fg-muted:      var(--paper-500);
  --fg-subtle:     var(--paper-400);
  --fg-disabled:   var(--paper-300);
  --fg-inverse:    var(--paper-0);
  --fg-accent:     var(--ember-500);
  --fg-on-accent:  var(--paper-0);

  --border-subtle: var(--paper-100);
  --border-default: var(--paper-200);
  --border-strong: var(--paper-300);
  --border-accent: var(--ember-500);
  --border-focus:  var(--ember-400);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);
  --accent-subtle: var(--ember-50);

  /* ========== SPACING — 4px base ========== */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 — default gap */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 — section gap */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  /* ========== RADII ========== */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;     /* inputs, small buttons */
  --r-lg:   10px;    /* cards, large buttons */
  --r-xl:   14px;    /* feature cards */
  --r-2xl:  20px;    /* flashcards */
  --r-full: 9999px;

  /* ========== SHADOWS — soft, warm, never blue ========== */
  --shadow-xs:  0 1px 1px rgba(46, 43, 34, 0.04);
  --shadow-sm:  0 1px 2px rgba(46, 43, 34, 0.06), 0 1px 1px rgba(46, 43, 34, 0.04);
  --shadow-md:  0 4px 10px -2px rgba(46, 43, 34, 0.08), 0 2px 4px -2px rgba(46, 43, 34, 0.06);
  --shadow-lg:  0 12px 28px -8px rgba(46, 43, 34, 0.12), 0 4px 10px -4px rgba(46, 43, 34, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(46, 43, 34, 0.18), 0 8px 16px -8px rgba(46, 43, 34, 0.08);

  /* Inset — for pressed/sunken states, inputs */
  --shadow-inset: inset 0 1px 2px rgba(46, 43, 34, 0.06);

  /* Focus ring — reserved token, 2px outer */
  --ring-focus:   0 0 0 2px var(--bg-surface), 0 0 0 4px var(--ember-300);

  /* ========== MOTION ========== */
  /* Fast, confident, minimal bounce. */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.6, 0.0, 0.8, 0.2);
  --ease-in-out: cubic-bezier(0.5, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 1.0, 0.3, 1); /* for card reveal */

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;

  /* ========== LAYOUT ========== */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --nav-h: 56px;
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 600;
}

/* ========== DARK PREMIUM ==========
   Near-black ink ground, soft ember accent, cooler warms.
   Note: foregrounds are warm off-white (not pure #FFF) to pair with paper.
   ================================================================= */
[data-theme="dark"] {
  /* Ink neutrals — not pure black; slight warm tint */
  --paper-0:   #0E0D0A;
  --paper-50:  #15130F;
  --paper-100: #1C1A14;
  --paper-200: #2A2620;  /* borders */
  --paper-300: #3D3830;
  --paper-400: #5C5547;
  --paper-500: #847C6C;
  --paper-600: #ADA693;
  --paper-700: #D4CDB9;   /* primary text */
  --paper-800: #E8E2D1;
  --paper-900: #F5F0E1;

  /* Ember shifts slightly warmer + lighter to pop on ink */
  --ember-500: #E88A3A;  /* primary */
  --ember-600: #F29C52;
  --ember-700: #F7AE6D;

  --bg-app:        var(--paper-0);
  --bg-surface:    var(--paper-50);
  --bg-subtle:     var(--paper-100);
  --bg-muted:      var(--paper-200);
  --bg-inverse:    var(--paper-800);

  --fg-default:    var(--paper-700);
  --fg-strong:     var(--paper-800);
  --fg-muted:      var(--paper-500);
  --fg-subtle:     var(--paper-400);
  --fg-disabled:   var(--paper-300);
  --fg-inverse:    var(--paper-0);
  --fg-accent:     var(--ember-500);
  --fg-on-accent:  #1C1309;

  --border-subtle: var(--paper-100);
  --border-default: var(--paper-200);
  --border-strong: var(--paper-300);
  --border-accent: var(--ember-500);
  --border-focus:  var(--ember-600);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);
  --accent-subtle: rgba(232, 138, 58, 0.12);

  /* Semantic — shifted for dark */
  --success-bg:   rgba(155, 177, 119, 0.14);
  --success-fg:   #B8CE92;
  --success-line: #7C9658;

  --warn-bg:   rgba(201, 165, 71, 0.14);
  --warn-fg:   #E0C171;
  --warn-line: #AE8D3A;

  --danger-bg:   rgba(194, 106, 77, 0.14);
  --danger-fg:   #E5997F;
  --danger-line: #B5694C;

  --info-bg:   rgba(126, 140, 168, 0.14);
  --info-fg:   #B3BED1;
  --info-line: #6F7E98;

  --srs-again: #D26A55;
  --srs-hard:  #D3A052;
  --srs-good:  #7FA68A;
  --srs-easy:  #7397AD;

  /* Shadows — deeper, softer in dark */
  --shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-md:  0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 6px 12px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 32px 56px -12px rgba(0, 0, 0, 0.7), 0 12px 20px -8px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);

  --ring-focus:   0 0 0 2px var(--bg-app), 0 0 0 4px var(--ember-500);
}

/* ============================================================
   BASE — applied to body if the file is included globally.
   Apps should scope these under a class if they need isolation.
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  background: var(--bg-app);
  font-feature-settings: 'ss01', 'cv11'; /* stylistic alts where available */
}

/* ============================================================
   SEMANTIC TYPE UTILITIES
   Use these class names in markup; they map to scale + family.
   ============================================================ */

.t-display-xl { font-family: var(--font-display); font-size: var(--fs-80); line-height: var(--lh-tight);  letter-spacing: var(--ls-tightest); font-weight: var(--fw-regular); }
.t-display-lg { font-family: var(--font-display); font-size: var(--fs-56); line-height: var(--lh-tight);  letter-spacing: var(--ls-tightest); font-weight: var(--fw-regular); }
.t-h1         { font-family: var(--font-display); font-size: var(--fs-40); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight);    font-weight: var(--fw-regular); }
.t-h2         { font-family: var(--font-display); font-size: var(--fs-30); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight);    font-weight: var(--fw-regular); }
.t-h3         { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight);    font-weight: var(--fw-medium); }
.t-h4         { font-family: var(--font-body);    font-size: var(--fs-20); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight);    font-weight: var(--fw-semi); }
.t-h5         { font-family: var(--font-body);    font-size: var(--fs-18); line-height: var(--lh-snug);   letter-spacing: var(--ls-normal);   font-weight: var(--fw-semi); }

.t-body-lg    { font-family: var(--font-body); font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.t-body       { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-relaxed); }
.t-body-sm    { font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-relaxed); }
.t-meta       { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--fg-muted); }
.t-caption    { font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-muted); }

.t-eyebrow    {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

.t-mono       { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: var(--ls-normal); }
.t-code       { font-family: var(--font-mono); font-size: var(--fs-14); background: var(--bg-muted); padding: 0.125em 0.375em; border-radius: var(--r-xs); }

/* Special: flashcard face type — large, serif, centered */
.t-flashcard  { font-family: var(--font-display); font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-regular); }
.t-flashcard-jp { font-family: var(--font-jp-display); font-size: var(--fs-80); line-height: var(--lh-tight); font-weight: 500; }

/* Numerics — tabular for stats */
.t-tabular    { font-variant-numeric: tabular-nums; }
.t-stat       { font-family: var(--font-display); font-size: var(--fs-40); line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }

/* Text color utilities */
.fg-default  { color: var(--fg-default); }
.fg-strong   { color: var(--fg-strong); }
.fg-muted    { color: var(--fg-muted); }
.fg-subtle   { color: var(--fg-subtle); }
.fg-accent   { color: var(--fg-accent); }