/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — FOUNDATION & SEMANTIC TOKENS
   Bright Curatorial Editorial Portfolio
   
   Load order: after shared.css, before page-specific CSS.
   
   Layer 1 — Foundation: raw design materials.
             Never applied directly to components.
   Layer 2 — Semantic:   usage-intent wrappers.
             Components reference these.
   Layer 3 — Context:    page-role overrides.
             .page-home (Curatorial) / .page-case (Docent).
             Defined in index.css and case.css respectively.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── L1: PAPER FAMILY ─────────────────────────────────────────
     Warm ivory spectrum. Page backgrounds and card surfaces.
     ──────────────────────────────────────────────────────────── */
  --c-paper-100: #FDFCFA;   /* card surface — lightest warm */
  --c-paper-200: #F6F4EF;   /* page background */
  --c-paper-300: #EFECE6;   /* warm section background */
  --c-paper-warm: #EDE9E1;  /* splash / hero warm panel */

  /* ── L1: INK FAMILY ──────────────────────────────────────────
     Near-black warm ink. Text and structural dark backgrounds.
     ──────────────────────────────────────────────────────────── */
  --c-ink-900: #1A1816;     /* primary text */
  --c-ink-700: #35322E;     /* secondary text */
  --c-ink-400: #8A847B;     /* muted / caption text */
  --c-ink-dark: #131211;    /* dark background (data strip, splash) */

  /* ── L1: SIGNAL FAMILY (蓝灰导视色) ─────────────────────────
     Blue-gray for wayfinding, structure, and docent hints.
     Not a brand color — a spatial and informational language.

     Solid grades (base on Ink hue, desaturated blue-gray):
       Signal Ink  = sharp wayfinding, nav active, direction
       Signal Base = standard emphasis, section label, links
       Signal Soft = docent hint, case annotation, evidence tag

     Line (based on Ink, low opacity — sharp / structural):
       line-strong .32 / line .22 / line-soft .14

     Wash (based on Soft, low opacity — air / ambient):
       wash-strong .16 / wash .10 / wash-soft .06

     Glow (based on Soft, low opacity — edge light / module):
       glow-strong .28 / glow .18 / glow-soft .10
     ──────────────────────────────────────────────────────────── */
  --signal-ink:  #2D5F6E;
  --signal-base: #4F7D8A;
  --signal-soft: #8EB0BA;

  --signal-line-strong: rgba(45, 95, 110, .32);
  --signal-line:        rgba(45, 95, 110, .22);
  --signal-line-soft:   rgba(45, 95, 110, .14);

  --signal-wash-strong: rgba(142, 176, 186, .16);
  --signal-wash:        rgba(142, 176, 186, .10);
  --signal-wash-soft:   rgba(142, 176, 186, .06);

  --signal-glow-strong: rgba(142, 176, 186, .28);
  --signal-glow:        rgba(142, 176, 186, .18);
  --signal-glow-soft:   rgba(142, 176, 186, .10);

  /* ── L1: CLAY / ACCENT FAMILY ────────────────────────────────
     Low-frequency warm temperature. Historical continuity.
     Not a primary color — used sparingly for warmth.
     ──────────────────────────────────────────────────────────── */
  --c-clay-600:  #A0603D;
  --c-clay-400:  #BF8560;
  --c-clay-pale: #F0EBE5;

  /* ── L1: TEAL ─────────────────────────────────────────────── */
  --c-teal:      #568575;
  --c-teal-pale: #E8F0EB;

  /* ── L1: SEMANTIC COLORS ─────────────────────────────────────
     Case study: risk / opportunity only. Not global UI colors.
     ──────────────────────────────────────────────────────────── */
  --c-risk:        #8A4440;
  --c-opportunity: #7B6A9E;

  /* ── L1: LINE / BORDER ───────────────────────────────────────
     Warm ink hairlines. Structural only — no decorative use.
     ──────────────────────────────────────────────────────────── */
  --line-subtle:  rgba(26, 24, 22, .08);
  --line-default: rgba(26, 24, 22, .14);
  --line-strong:  rgba(26, 24, 22, .22);

  /* ── L1: SHADOW ──────────────────────────────────────────────
     Breath-level only. No UI-card depth.
     ──────────────────────────────────────────────────────────── */
  --shadow-breath: 0 1px 2px rgba(28, 26, 23, .025);
  --shadow-soft:   0 1px 5px rgba(28, 26, 23, .04);
  --shadow-medium: 0 2px 6px rgba(26, 24, 22, .04);
  --shadow-large:  0 4px 14px rgba(26, 24, 22, .05);

  /* ── L1: RADIUS ──────────────────────────────────────────────
     Reading types: smallest. Exhibit containers: larger.
     Prohibited: global 24–32px large radius.
     paper   0px  — pure editorial, no rounding
     label   2px  — light rounding for text badges
     archive 4px  — evidence containers
     exhibit 12px — image / prototype containers
     overlay 14px — lightbox, modal
     ──────────────────────────────────────────────────────────── */
  --radius-paper:   0px;
  --radius-label:   2px;
  --radius-archive: 4px;
  --radius-exhibit: 12px;
  --radius-overlay: 14px;


  /* ══════════════════════════════════════════════════════════════
     LAYER 2 — SEMANTIC TOKENS
     Usage-intent wrappers. Components reference these, not L1.
     ══════════════════════════════════════════════════════════════ */

  /* Surfaces */
  --surface-page:    var(--c-paper-200);
  --surface-section: var(--c-paper-300);
  --surface-card:    var(--c-paper-100);
  --surface-dark:    var(--c-ink-dark);

  /* Typography */
  --text-primary:   var(--c-ink-900);
  --text-secondary: var(--c-ink-700);
  --text-muted-sem: var(--c-ink-400);

  /* Accent roles */
  --accent-signal: var(--signal-ink);
  --accent-clay:   var(--c-clay-600);

  /* Borders */
  --border-subtle:  var(--line-subtle);
  --border-default: var(--line-default);

  /* ── L2: LIGHT SYSTEM ────────────────────────────────────────
     Six layers of curatorial light.
     Do not apply arbitrarily — follow Component Mapping.

     Paper Light   → page base warmth, not a glow
     Ambient Light → room-level diffuse
     Gallery Wash  → wall wash, section background effect
     Module Glow   → individual exhibit lighting
     Signal Glow   → cold wayfinding edge light
     Focus Light   → single strongest exhibit light per screen
     ──────────────────────────────────────────────────────────── */
  --light-paper:   rgba(255, 253, 248, .72);
  --light-ambient: rgba(255, 255, 255, .42);
  --light-gallery: rgba(244, 226, 198, .22);
  --light-module:  rgba(142, 176, 186, .18);
  --light-signal:  rgba(142, 176, 186, .18);  /* alias for Signal Glow semantic */
  --light-focus:   rgba(244, 226, 198, .28);
}