/* =============================================================================
   orahoa — design tokens · neutral fallback · v0.1
   -----------------------------------------------------------------------------
   CANONICAL SOURCE. tokens.json and tokens.ts are generated VIEWS of this file.
   Naming is the single source of truth: a token's canonical name is its CSS
   custom property in kebab-case (e.g. --surface-far). The JSON path
   surface.far maps deterministically to --surface-far (dots -> hyphens).
   Never reference the dotted form in code; it exists only for tooling.

   THEMEABLE vs PLATFORM-OWNED
   - Themeable slots are filled at runtime by a community's signed
     CulturalManifest (see schema/cultural-manifest.schema.json).
   - Platform-owned tokens (brand, structure, motion, a11y floors) are never
     re-skinned by a community. --brand-core in particular is decoupled from
     the action/focus accents so an accessibility recolour of actions can
     never recolour the wordmark.
   ============================================================================= */

:root {
  /* ===== SURFACES — depth planes · THEMEABLE ===========================
     Depth is carried by LUMINANCE + gutter thickness, so it survives any
     palette and reads in greyscale. In light: nearer = lighter. */
  --surface-far:    #EAE3D6; /* the ground · outermost kin tier */
  --surface-mid:    #F3EEE3; /* middle tier */
  --surface-near:   #FCF9F3; /* foreground · closest tier */
  --surface-sunken: #F1EBDF; /* input wells, recessed fields */

  /* ===== INK · THEMEABLE (within the contrast floor) ==================== */
  --ink-strong:    #211D17; /* titles, voice           — >=13:1 on near */
  --ink-body:      #3E382F; /* reading copy            — >= 9:1 */
  --ink-quiet:     #756B5E; /* NON-ESSENTIAL metadata  — >=4.6:1 (never controls) */
  --ink-on-accent: #FCF9F3; /* text/icon on --action-primary */

  /* ===== LINES ========================================================== */
  --border:        #E7DFD0;
  --border-strong: #D8CDBA;

  /* ===== BRAND — PLATFORM-OWNED · never community-themed ================
     The wordmark core dot and the app mark. Kept separate from the action
     accents on purpose (see header note). */
  --brand-core: #A65A3E;

  /* ===== ACCENT / ACTION / FOCUS · THEMEABLE (default = clay) ===========
     Four distinct meanings that resolve to one value in the neutral theme.
     A community (or an a11y pass) may move --accent-primary without ever
     touching --brand-core. */
  --accent-primary:        #A65A3E; /* the community's primary accent */
  --action-primary:        var(--accent-primary); /* primary button fill */
  --action-primary-hover:  #964E34; /* darken ~6% */
  --action-primary-active: #834631; /* darken ~10% */
  --focus-ring:            var(--accent-primary); /* focus-visible outline */
  --accent-deep:           #8B4226; /* small text / body-size links — >=5.6:1 */
  --link:                  var(--accent-deep);

  /* ===== FEEDBACK — gentle, never an alarm ============================== */
  --success:         #1F8A5B;
  --caution:         #9A7A24;
  --caution-surface: #FBF4E1;
  --danger:          #A23E2C; /* destructive (delete) — muted, not red-alert */
  --danger-surface:  #FBF1ED;

  /* ===== MEDIA — keeps scope legible over full-bleed photo/video ======== */
  --scrim:        rgba(22, 17, 12, .55);
  --scrim-strong: rgba(22, 17, 12, .72);

  /* ===== DEPTH GUTTER — thickness (not colour) is the primary carrier ====
     Scales to the manifest's tier count; mirrors to the right under RTL. */
  --gutter-near: 7px;
  --gutter-mid:  4px;
  --gutter-far:  2px;

  /* ===== TYPE =========================================================== */
  --font-ui:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-voice: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* role         size (px / rem)   weight   line-height   use */
  --text-voice: 2.375rem; /* 38  400  1.15  one display line per screen */
  --text-title: 1.6875rem;/* 27  600  1.2   screen titles */
  --text-body:  1.25rem;  /* 20  400  1.5   reading — FLOOR for body copy */
  --text-label: 1.125rem; /* 18  600  1.2   controls/buttons — FLOOR for any control */
  --text-aside: 1rem;     /* 16  400  1.4   NON-ESSENTIAL metadata ONLY (never a control, label, or body) */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight: 1.15;
  --leading-snug:  1.2;
  --leading-body:  1.5;
  --tracking-title:-0.01em;
  --tracking-body:  0em;

  /* ===== SPACE — 8-unit base (px in the name, rem in the value) ========= */
  --space-4:   0.25rem; /* 4  hairline gaps */
  --space-8:   0.5rem;  /* 8  tight */
  --space-16:  1rem;    /* 16 snug · MIN gap between two touch targets */
  --space-24:  1.5rem;  /* 24 room */
  --space-40:  2.5rem;  /* 40 breath */
  --space-64:  4rem;    /* 64 field */
  --space-96:  6rem;    /* 96 section break */

  /* ===== RADIUS ========================================================= */
  --radius-xs:   6px;  /* inputs, chips */
  --radius-sm:   8px;  /* small cards, buttons */
  --radius-md:   12px; /* cards, dialogs */
  --radius-lg:   20px; /* sheets, media tiles */
  --radius-pill: 999px;

  /* ===== ELEVATION (light) ============================================== */
  --elevation-rest:    0 2px 8px rgba(33, 29, 23, .05);
  --elevation-near:    0 6px 18px rgba(33, 29, 23, .09);
  --elevation-overlay: 0 18px 48px rgba(33, 29, 23, .18);

  /* ===== MOTION — no spring, no bounce, no overshoot =================== */
  --dur-quick: 120ms; /* feedback */
  --dur-move:  240ms; /* enter / leave */
  --dur-depth: 320ms; /* scope / depth change — the signature */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-enter:    cubic-bezier(0, 0, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);

  /* ===== Z LAYERS ======================================================= */
  --z-base:   0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-scrim:  100;
  --z-dialog: 110;
  --z-toast:  120;

  /* ===== TARGETS & MEASURE (a11y floors — platform-owned) =============== */
  --target-primary:   56px; /* primary touch target */
  --target-secondary: 48px; /* secondary touch target */
  --target-gap:       16px; /* min clearance between targets */
  --measure-body:     66ch; /* max reading width */
  --measure-voice:    30ch;

  /* ===== BREAKPOINTS (declared for tooling; media queries use the px) ===
     compact  <600 · medium 600–1023 · expanded 1024–1439 · wide >=1440 */
  --bp-medium:   600px;
  --bp-expanded: 1024px;
  --bp-wide:     1440px;
}

/* =============================================================================
   DARK — same scaffold inverted. Nearer = lighter (raised planes catch light).
   Only the mode-dependent slots are overridden; structure/motion/space are shared.
   ============================================================================= */
[data-theme="dark"] {
  --surface-far:    #15120D;
  --surface-mid:    #1F1B15;
  --surface-near:   #2A251D;
  --surface-sunken: #1C1812;

  --ink-strong:    #F4EEE2;
  --ink-body:      #D7CFC0;
  --ink-quiet:     #9C9285;
  --ink-on-accent: #15120D;

  --border:        #2E2820;
  --border-strong: #3A3328;

  --brand-core: #CE7E59; /* app-tile rendering on dark only */

  --accent-primary:        #CE7E59;
  --action-primary:        var(--accent-primary);
  --action-primary-hover:  #DA8C66;
  --action-primary-active: #B86A47;
  --focus-ring:            var(--accent-primary);
  --accent-deep:           #E59B77;
  --link:                  var(--accent-deep);

  --success:         #5FB98C;
  --caution:         #C9A24F;
  --caution-surface: #2A2410;
  --danger:          #D87C68;
  --danger-surface:  #2A1712;

  --scrim:        rgba(0, 0, 0, .62);
  --scrim-strong: rgba(0, 0, 0, .78);

  --elevation-rest:    0 2px 8px rgba(0, 0, 0, .30);
  --elevation-near:    0 6px 18px rgba(0, 0, 0, .40);
  --elevation-overlay: 0 18px 48px rgba(0, 0, 0, .55);
}

/* Respect the OS preference when no explicit data-theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-far:#15120D; --surface-mid:#1F1B15; --surface-near:#2A251D; --surface-sunken:#1C1812;
    --ink-strong:#F4EEE2; --ink-body:#D7CFC0; --ink-quiet:#9C9285; --ink-on-accent:#15120D;
    --border:#2E2820; --border-strong:#3A3328; --brand-core:#CE7E59;
    --accent-primary:#CE7E59; --action-primary-hover:#DA8C66; --action-primary-active:#B86A47;
    --accent-deep:#E59B77; --success:#5FB98C; --caution:#C9A24F; --caution-surface:#2A2410;
    --danger:#D87C68; --danger-surface:#2A1712;
    --scrim:rgba(0,0,0,.62); --scrim-strong:rgba(0,0,0,.78);
    --elevation-rest:0 2px 8px rgba(0,0,0,.30); --elevation-near:0 6px 18px rgba(0,0,0,.40); --elevation-overlay:0 18px 48px rgba(0,0,0,.55);
  }
}

/* prefers-reduced-motion — depth becomes a cross-fade; gutter + spoken label carry the change. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 1ms; --dur-move: 1ms; --dur-depth: 1ms;
  }
}