/* =============================================================================
 * Reddably — F0 design tokens ("Stone & Sage")
 * =============================================================================
 * The authoritative token layer for the app. LIGHT MODE ONLY — no dark mode,
 * no theme toggle. Two layers:
 *   1. Primitives  — raw palette + scales. Not consumed directly by views.
 *   2. Semantic    — role-based aliases. Views/components consume THESE.
 *
 * Rules (see CLAUDE.md):
 *   * Never reference a raw hex / px literal in a view — use a semantic token.
 *   * Ink is primary; sage is the accent; ink is body text; warm paper is
 *     the background. Calm and clinical — sage only where it earns attention.
 *   * No external font dependency: families degrade to robust system fallbacks.
 * ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
   * 1. PRIMITIVES — palette
   * ------------------------------------------------------------------------ */

  /* Ink (warm near-black) + warm neutrals derived from paper */
  --ink-900: #1F1E1A;       /* body text */
  --ink-700: #4C4839;       /* strong secondary text */
  --ink-500: #8C8472;       /* muted text */
  --ink-400: #B5AC97;       /* subtle text / placeholder */
  --ink-300: #D6D0C2;       /* disabled */

  /* Paper / surfaces (warm) */
  --paper-base:   #FBFAF7;  /* app background */
  --paper-raised: #FFFFFF;  /* cards / topbar / sidebar surface */
  --paper-sunken: #F4F2EC;  /* wells, empty-state fills */

  /* Lines */
  --line-200: #E8E4DB;      /* default border */
  --line-300: #D6D0C2;      /* stronger border */

  /* Alpha primitives (for overlay; warm-tinted) */
  --alpha-ink-45:     rgba(26, 23, 24, 0.45);
  --alpha-ink-08:     rgba(26, 23, 24, 0.08);
  --alpha-ink-06:     rgba(26, 23, 24, 0.06);
  --alpha-ink-12:     rgba(26, 23, 24, 0.12);

  /* ---------------------------------------------------------------------------
   * 1b. PRIMITIVES — type
   * ------------------------------------------------------------------------ */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --font-size-1: 12px;   /* caption */
  --font-size-2: 13px;   /* small / meta */
  --font-size-3: 14px;   /* body-small */
  --font-size-4: 15px;   /* body */
  --font-size-5: 18px;   /* h3 / wordmark */
  --font-size-6: 22px;   /* h2 */
  --font-size-7: 28px;   /* h1 */

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

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-base:  1.55;

  --tracking-wide: 0.02em;

  /* ---------------------------------------------------------------------------
   * 1c. PRIMITIVES — spacing (4px base), radius, shadow, motion, z-index, border
   * ------------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  --shadow-0: none;
  --shadow-1: 0 1px 2px var(--alpha-ink-06);
  --shadow-2: 0 2px 8px var(--alpha-ink-08);
  --shadow-3: 0 12px 32px var(--alpha-ink-12);

  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    320ms;
  --motion-ambient: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  --border-width-1: 1px;
  --border-width-2: 2px;

  /* z-index "zones" */
  --zone-0: 0;     /* base content */
  --zone-1: 10;    /* sticky topbar */
  --zone-2: 100;   /* off-canvas drawer + backdrop */
  --zone-3: 1000;  /* modals / toasts */

  /* shell metrics */
  --rail-width: 248px;
  --topbar-height: 64px;
  --content-max: 1200px;

  /* ===========================================================================
   * 2. SEMANTIC — role-based aliases (consume these in views)
   * ======================================================================== */

  /* surfaces / background */
  --color-bg:            #FBFAF7;
  --color-surface:       #FFFFFF;
  --color-surface-sunken: #F4F2EC;

  /* text */
  --color-text:          #1F1E1A;
  --color-text-strong:   #1F1E1A;
  --color-text-muted:    #4C4839;
  --color-text-subtle:   #6C6657;
  --color-text-disabled: #B5AC97;
  --color-text-inverse:  #FFFFFF;

  /* primary (ink) */
  --color-primary:        #1F1E1A;
  --color-primary-hover:  #34322A;
  --color-primary-tint:   #E8E4DB;
  --color-primary-wash:   #F4F2EC;
  --color-on-primary:     var(--paper-raised);

  /* accent (sage) */
  --color-accent:        #486141;
  --color-accent-strong: #384B33;
  --color-accent-tint:   #DDE6D7;

  /* lines / borders */
  --color-border:        #E8E4DB;
  --color-border-strong: #D6D0C2;

  /* status */
  --color-success: #486141;
  --color-warning: #4C4839;
  --color-danger:  #A14842;
  --color-info:    #6C6657;

  /* interaction */
  --color-focus-ring: #5C7B55;
  --color-backdrop:   rgba(31, 30, 26, 0.35);

  /* component-level shell aliases (kept semantic so app.css stays literal-free) */
  --nav-link-text:        var(--color-text-strong);
  --nav-link-hover-bg:    var(--color-surface-sunken);
  --nav-link-active-bg:   var(--color-primary-tint);
  --nav-link-active-text: var(--color-primary);
  --nav-active-indicator: var(--color-primary);

  --focus-ring-width: var(--border-width-2);
  --focus-ring-offset: var(--border-width-2);
}

/* =============================================================================
 * Accessibility — honor reduced-motion by collapsing the motion scale.
 * Any transition/animation that reads --motion-* becomes effectively instant.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:    1ms;
    --motion-base:    1ms;
    --motion-slow:    1ms;
    --motion-ambient: 1ms;
  }
}