/* ================================================================
   LEX — DESIGN SYSTEM (Layout Foundation, 2026-05-10)
   Token sheet ported from lex-design-system/. Older variable names
   (--surface, --white, --border, --gold-bg, --danger, --success, etc.)
   are kept as semantic aliases so existing CSS continues to resolve.
================================================================ */

:root {
  /* ── Paper / surfaces ─────────────────────────────────────────── */
  --paper:        #f6f3ec;        /* page background — warm off-white */
  --paper-2:      #ffffff;        /* clean white surface */
  --paper-3:      #efece4;        /* recessed surfaces, rail */
  --paper-edge:   #e6e1d3;        /* hairline divider */
  --line:         #d4ccb8;        /* stronger rule */
  --line-soft:    #ebe6d6;
  /* legacy aliases */
  --surface:      var(--paper);
  --white:        var(--paper-2);
  --bg:           var(--paper);
  --border:       var(--paper-edge);
  --border-2:     var(--line-soft);
  --border-soft:  var(--line-soft);

  /* ── Ink hierarchy ────────────────────────────────────────────── */
  --ink:          #1a1814;        /* primary text & primary action */
  --ink-2:        #2e2a23;        /* heading */
  --ink-3:        #524c3f;        /* body */
  --ink-4:        #7a7264;        /* secondary */
  --ink-5:        #a8a08e;        /* tertiary, disabled */
  /* legacy aliases */
  --mid:          var(--ink-4);
  --muted:        var(--ink-5);
  --text-secondary: var(--ink-4);

  /* ── Gold — warm brass ────────────────────────────────────────── */
  --gold:         #a8803a;
  --gold-deep:    #8a6628;
  --gold-soft:    #d9bc7a;
  --gold-wash:    #f5ecd6;
  --gold-line:    #c9a85e;
  /* legacy aliases */
  --gold-2:       var(--gold-deep);
  --gold-dim:     var(--gold-soft);
  --gold-bg:      var(--gold-wash);

  /* ── AI surface — flat white card; identity from gold left rule + badge ── */
  --ai-tint:      #ffffff;
  --ai-edge:      var(--paper-edge);
  --ai-ink:       #6a4f1a;

  /* ── Status ───────────────────────────────────────────────────── */
  --ok:           #4a6b3a;
  --warn:         #a06a1f;
  --err:          #8a2a26;
  --info:         #3a5a7a;
  /* legacy aliases */
  --success:      var(--ok);
  --danger:       var(--err);
  --success-bg:   #EBF5EF;
  --warn-bg:      #FDF3E7;
  --danger-bg:    #FDF0EE;
  --info-bg:      #EBF2F8;

  /* ── High contrast overrides (applied via .hc class on body) ──── */
  --hc-ink: #000000;
  --hc-surface: #FFFFFF;
  --hc-border: #000000;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  /* design-system aliases */
  --serif:      var(--font-serif);
  --sans:       var(--font-sans);
  --mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --t-display: 3rem;      /* 48 — editorial page titles */
  --t-h1:      2rem;      /* 32 */
  --t-h2:      1.5rem;    /* 24 — module title (serif) */
  --t-h3:      1.125rem;  /* 18 */
  --t-body:    1rem;      /* 16 */
  --t-small:   0.875rem;  /* 14 */
  --t-mini:    0.75rem;   /* 12 — meta */

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-body:   1.55;

  /* ── Spacing & layout ─────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --content-max:        80rem;     /* 1280 */
  --content-pad:        1.5rem;    /* 24 */
  --rail-w:             22rem;     /* 352 */
  --topbar-h:           3.25rem;   /* 52 */
  --bp-stack:           1100px;
  --bp-mobile:          768px;
  --section-gap:        1.75rem;
  --card-gap:           0.6rem;
  --tile-gap:           0.4rem;
  --settings-nav-w:     14rem;
  --settings-panel-max: 56rem;

  /* ── Radius ───────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ── Shadows — restrained ─────────────────────────────────────── */
  --shadow-1:   0 1px 0 rgba(40, 30, 20, .04), 0 1px 2px rgba(40, 30, 20, .04);
  --shadow-2:   0 1px 0 rgba(40, 30, 20, .04), 0 4px 14px rgba(40, 30, 20, .06);
  --shadow-pop: 0 12px 32px rgba(40, 30, 20, .14), 0 0 0 1px rgba(40, 30, 20, .05);
  /* legacy aliases */
  --shadow-md:  var(--shadow-2);
  --shadow-lg:  var(--shadow-pop);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: .12s;
  --dur:      .2s;
  --t:        180ms ease;          /* legacy transition shorthand */
}

/* Font size scale */
html { font-size: 16px; }
html.fs-small  { font-size: 14px; }
html.fs-large  { font-size: 18px; }
html.fs-xlarge { font-size: 20px; }

/* ── Top Loader Bar (YouTube-style) ──────────────────────────── */
.top-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gold);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.top-loader.active {
  opacity: 1;
  animation: topload 1.8s ease-in-out infinite;
}
.top-loader.finish {
  width: 100% !important;
  opacity: 0;
  transition: width 0.2s ease-out, opacity 0.3s 0.2s;
  animation: none;
}
@keyframes topload {
  0%   { width: 0; }
  20%  { width: 30%; }
  50%  { width: 60%; }
  80%  { width: 85%; }
  100% { width: 95%; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.hc {
  --ink: var(--hc-ink);
  --surface: var(--hc-surface);
  --border: var(--hc-border);
  filter: contrast(1.15);
}