/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/raycast/tokens.css
 *
 * Structured token bindings for the "Raycast" brand — the macOS-native
 * command palette / launcher's precision desktop-instrument voice.
 *
 * Brand identity in three sentences:
 *   1. Near-black blue-tinted canvas (#07080a) — not pure black — with
 *      semi-transparent white borders (0.06 opacity) and multi-layer
 *      inset shadows that simulate physical glass-key depth.
 *   2. Inter everywhere with OpenType "calt","kern","liga","ss03"; the
 *      signature move is positive +0.2px letter-spacing on body for an
 *      airy dark-mode rhythm, weight 500 as the readable body baseline.
 *   3. Raycast Red (#FF6363) is punctuation, not pervasive — hero
 *      stripes and danger states only. Raycast Blue (hsl(202,100%,67%))
 *      carries interactive focus / links so red can stay scarce.
 *
 * Schema decisions:
 *   - --bg #07080a (blue-cold near-black) / --surface #101111 (Surface 100).
 *   - --surface-warm aliases --surface (cold-dark system, no warm tier).
 *   - --fg #f9f9f9 near-white (avoids pure-white eye-strain on void).
 *   - --fg-2 #cecece light-gray body / --meta #6a6b6c dim-gray metadata.
 *   - --border rgba(255,255,255,0.06) — the "barely visible, structurally
 *     essential" containment line called out in DESIGN.md §7.
 *   - --accent #FF6363 (Raycast Red); hover/active shift tone, not opacity
 *     (opacity 0.6 is a component-level interaction pattern, not a token).
 *   - --focus-ring uses Raycast Blue, not accent red — separating brand
 *     punctuation from interactive feedback is core to the system.
 *   - --elev-ring is the macOS signature double-ring (outer #1b1c1e
 *     + inset #07080a) that replaces traditional 1px borders on cards.
 *   - --radius-sm 6px (workhorse: buttons / badges), --radius-md 12px
 *     (standard cards), --radius-lg 16px (large feature containers).
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ──────────────────────────────────────────────────── */
  --bg:           #07080a;              /* near-black blue tint — the void */
  --surface:      #101111;              /* Surface 100 — elevated cards */
  --surface-warm: var(--surface);       /* no warm tier in cold dark system */

  /* ─── Foreground ───────────────────────────────────────────────── */
  --fg:    #f9f9f9;                     /* near-white primary text */
  --fg-2:  #cecece;                     /* light gray secondary body */
  --muted: #9c9c9d;                     /* medium gray tertiary / nav links */
  --meta:  #6a6b6c;                     /* dim gray placeholders / metadata */

  /* ─── Border ───────────────────────────────────────────────────── */
  --border:      rgba(255, 255, 255, 0.06);   /* card containment — barely visible */
  --border-soft: rgba(255, 255, 255, 0.04);   /* inner row separator */

  /* ─── Accent ───────────────────────────────────────────────────── */
  --accent:        #FF6363;             /* Raycast Red — hero stripes, error states */
  --accent-on:     #ffffff;
  --accent-hover:  #ff7777;             /* lighter tone for hover */
  --accent-active: #e85757;             /* darker tone for pressed */

  /* ─── Semantic ─────────────────────────────────────────────────── */
  --success: hsl(151, 59%, 59%);        /* Raycast Green */
  --warn:    hsl(43, 100%, 60%);        /* Raycast Yellow */
  --danger:  hsl(0, 100%, 69%);         /* Error Red (≈ #FF6363) */

  /* ─── Typography ───────────────────────────────────────────────── */
  --font-display: "Inter", "Inter Fallback", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", "Inter Fallback", "SF Pro Text", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale — DESIGN.md §3 Typography Hierarchy.
   * Display Hero (64px) → text-4xl; Section Display (≈40–56px) → text-3xl;
   * Section Heading (24px) → text-2xl; Sub-heading (20px) → text-xl;
   * Body Large (18px) → text-lg; Body (16px) → text-base;
   * Caption (14px) → text-sm; Small (12px) → text-xs. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  40px;
  --text-4xl:  64px;

  /* Leading + tracking.
   * --leading-body 1.6: DESIGN.md "Body 16/500/1.60" — relaxed dark rhythm.
   * --leading-tight 1.1: hero hugs its baseline.
   * --tracking-display 0px: hero is zero-tracked; body inline adds +0.2px
   * (the signature Raycast move noted in DESIGN.md §3 Principles). */
  --leading-body:     1.6;
  --leading-tight:    1.1;
  --tracking-display: 0px;

  /* ─── Spacing ──────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Section rhythm — DESIGN.md §5 "80–120px vertical between sections".
   * The dramatic negative space is the cinematic pacing of the system. */
  --section-y-desktop: 96px;
  --section-y-tablet:  64px;
  --section-y-phone:   40px;

  /* ─── Radius ───────────────────────────────────────────────────── */
  /* 6px is the workhorse (buttons, badges); 12px standard cards;
   * 16px large feature containers; pill (9999px) for primary CTAs
   * — DESIGN.md uses 86px+ which is functionally pill at all sizes. */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ─── Elevation ────────────────────────────────────────────────── */
  /* macOS-native shadow philosophy: outer rings replace borders, inset
   * highlights simulate light from above, inset darks simulate shadow
   * underneath. --elev-ring is the signature double-ring: outer card-
   * surface tone + inset deep-bg tone, creating physical containment. */
  --elev-flat:   none;
  --elev-ring:   rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;
  --elev-raised:
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px,
    0 0 0 1px rgba(255, 255, 255, 0.06);

  /* ─── Focus ────────────────────────────────────────────────────── */
  /* Raycast Blue, not accent red — DESIGN.md §2 reserves red for hero
   * stripes / danger and blue for interactive / focus / links. Keeping
   * focus blue protects the scarcity of the red. */
  --focus-ring: 0 0 0 3px hsla(202, 100%, 67%, 0.35);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --motion-fast:   150ms;
  --motion-base:   200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ───────────────────────────────────────────────────── */
  --container-max:            1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet:  16px;
  --container-gutter-phone:   12px;
}
