/* ============================================
   THE LILONG — DESIGN TOKENS
   The visual system: paper, ink, cinnabar.
   ============================================ */

:root {
  /* --- PAPER (the cream world) --- */
  --paper: #f4ede1;            /* main cream paper */
  --paper-2: #ebe2d2;          /* secondary, slightly darker */
  --paper-3: #e0d4bd;          /* deckle edge, warmer */
  --paper-deep: #d6c8a8;       /* deepest paper, for shadows */
  --paper-shadow: rgba(74, 56, 30, 0.08);

  /* --- INK (the deep brown-black) --- */
  --ink: #1a1612;              /* primary text */
  --ink-2: #2a2520;            /* secondary text */
  --ink-3: #4a3f33;            /* tertiary */
  --ink-4: #6f6052;            /* captions, marginalia */
  --ink-5: #9b8a78;            /* dividers, light */
  --ink-mute: #b5a692;

  /* --- ACCENTS (the Shanghai poster palette) --- */
  --cinnabar: #b03e2c;         /* Shanghai poster red */
  --cinnabar-2: #c4503a;       /* brighter cinnabar */
  --cinnabar-deep: #8a2e1f;    /* darker cinnabar */
  --cinnabar-tint: #e6c8be;    /* cinnabar tint */
  --cinnabar-wash: rgba(176, 62, 44, 0.08);

  --indigo: #2a3f5f;           /* deep Shanghai indigo */
  --indigo-2: #3a5070;         /* brighter */
  --indigo-tint: #c8d0db;      /* tint */
  --indigo-wash: rgba(42, 63, 95, 0.06);

  --sage: #6b8e5a;             /* garden sage */
  --sage-2: #84a373;           /* brighter */
  --sage-tint: #d4dccb;        /* tint */
  --sage-wash: rgba(107, 142, 90, 0.08);

  --ochre: #c8993a;            /* ochre gold */
  --ochre-2: #d6a94a;          /* brighter */
  --ochre-deep: #8a6a25;       /* deep */
  --ochre-tint: #ead7a8;       /* tint */
  --ochre-wash: rgba(200, 153, 58, 0.1);

  --terracotta: #c46c4a;       /* weathered terracotta */

  /* --- HIGHLIGHTS (hover, focus) --- */
  --highlight: #f0e0a8;        /* highlighter yellow */

  /* --- TYPOGRAPHY --- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Source Serif 4', 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-ch: 'Noto Serif SC', 'Songti SC', serif;
  --font-ch-display: 'Noto Serif SC', 'Songti SC', serif;
  --font-hand: 'Caveat', 'Homemade Apple', cursive;

  /* --- SPACING --- */
  --s-0: 0.25rem;
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;
  --s-10: 12rem;

  /* --- TYPE SCALE --- */
  --t-1: 0.75rem;     /* micro */
  --t-2: 0.875rem;    /* small */
  --t-3: 1rem;        /* body */
  --t-4: 1.125rem;    /* lead */
  --t-5: 1.375rem;    /* h4 */
  --t-6: 1.75rem;     /* h3 */
  --t-7: 2.25rem;     /* h2 */
  --t-8: 3rem;        /* h1 */
  --t-9: 4.5rem;      /* display */
  --t-10: 6.5rem;     /* huge display */
  --t-11: 9rem;       /* hero */

  /* --- MOTION --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.15s;
  --dur-2: 0.3s;
  --dur-3: 0.6s;
  --dur-4: 1.2s;
  --dur-5: 2s;

  /* --- LAYOUT --- */
  --w-page: 1440px;
  --w-content: 720px;
  --w-wide: 1080px;
  --w-margin: 8vw;
  --gutter: 1.5rem;

  /* --- EFFECTS --- */
  --shadow-1: 0 1px 2px var(--paper-shadow);
  --shadow-2: 0 4px 12px rgba(74, 56, 30, 0.1);
  --shadow-3: 0 12px 40px rgba(74, 56, 30, 0.15);
  --shadow-paper: 0 1px 0 rgba(74, 56, 30, 0.04), 0 8px 24px -8px rgba(74, 56, 30, 0.18);
  --halftone: radial-gradient(circle at 1px 1px, var(--ink) 0.5px, transparent 0.5px);
}

/* DARK MODE — the deep night, for the audio walk */
[data-theme="night"] {
  --paper: #1a1612;
  --paper-2: #221c16;
  --paper-3: #2a2218;
  --paper-deep: #322a1e;
  --paper-shadow: rgba(0, 0, 0, 0.4);

  --ink: #f0e4c8;
  --ink-2: #d6c8a8;
  --ink-3: #b5a692;
  --ink-4: #8a7d6a;
  --ink-5: #6a5d4a;
  --ink-mute: #4a3f33;

  --cinnabar: #d9654f;
  --cinnabar-tint: #6a3a2e;
  --cinnabar-wash: rgba(217, 101, 79, 0.1);
  --indigo-tint: #3a4860;
  --indigo-wash: rgba(100, 130, 170, 0.08);
  --sage-tint: #4a5e3a;
  --sage-wash: rgba(132, 163, 115, 0.1);
  --ochre-tint: #6a4a18;
  --ochre-wash: rgba(214, 169, 74, 0.12);

  --highlight: #4a3a18;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-paper: 0 1px 0 rgba(255, 220, 160, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}