/* ──────────────────────────────────────────────────────────────────────────
   Wabi design-system tokens — ported in-place from @wabi/web-sdk
   (sotabot/react-native-app-template · web-sdk/src/shell-components/primitives
    /tokens.ts + typography). Light theme only.

   This is the foundation of the in-place DS adoption: the playground's legacy
   variables (--ink, --line, --panel, --accent, radii, shadows, fonts) are
   remapped at the bottom onto these Wabi tokens, so every existing rule that
   already uses them re-skins to Wabi automatically. App-orb / glass-effect
   styling is intentionally left untouched (migrated later).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* — Colour (oklch) — */
  --shell-background-page: oklch(0.993 0.005 88);
  --shell-background-foreground: oklch(1 0.003 88);
  --shell-background-primary: oklch(0.984 0.006 88);
  --shell-background-secondary: oklch(0.971 0.007 88);
  --shell-background-tertiary: oklch(0.956 0.008 88);
  --shell-background-popover: var(--shell-background-foreground);

  --shell-foreground-primary: oklch(0.17 0.009 88);
  --shell-foreground-secondary: oklch(0.5 0.008 88);
  --shell-foreground-tertiary: oklch(0.66 0.007 88);
  --shell-foreground-disabled: var(--shell-foreground-tertiary);
  --shell-foreground-accent: oklch(0.62 0.065 210);
  --shell-foreground-accent-warm: oklch(0.83 0.03 95);
  --shell-foreground-positive: oklch(0.68 0.14 150);
  --shell-foreground-like: oklch(0.62 0.19 355);
  --shell-foreground-negative: oklch(0.58 0.095 25);

  --shell-primary: var(--shell-foreground-primary);
  --shell-primary-hover: color-mix(in oklch, var(--shell-primary) 68%, var(--shell-background-page));
  --shell-primary-foreground: var(--shell-background-page);
  --shell-secondary: var(--shell-background-secondary);
  --shell-secondary-foreground: var(--shell-foreground-primary);

  --shell-destructive: var(--shell-foreground-negative);
  --shell-destructive-fill: oklch(0.5 0.11 17);
  --shell-destructive-foreground: oklch(0.985 0 0);
  --shell-destructive-subtle: color-mix(in oklch, oklch(0.48 0.13 17) 11%, var(--shell-background-page));

  --shell-border-subtle: oklch(0.72 0.012 88 / 0.17);
  --shell-border: oklch(0.68 0.014 88 / 0.16);
  --shell-input: oklch(0.64 0.016 88 / 0.2);
  --shell-border-strong: oklch(0.58 0.018 88 / 0.26);
  --shell-ring: var(--shell-foreground-accent);
  --shell-overlay: oklch(0 0 0 / 0.35);

  /* — Spacing & padding scale — */
  --shell-space-xxs: 4px;
  --shell-space-xs: 0.5rem;
  --shell-space-sm: 0.75rem;
  --shell-space-md: 1rem;
  --shell-space-lg: 1.25rem;
  --shell-space-xl: 1.5rem;
  --shell-space-2xl: 2rem;
  --shell-padding-2xs: 0.125rem;
  --shell-padding-xs: 0.5rem;
  --shell-padding-sm: 0.75rem;
  --shell-padding-md: 1rem;
  --shell-padding-lg: 1.25rem;
  --shell-padding-xl: 1.5rem;
  --shell-padding-2xl: 2rem;
  --shell-padding-3xl: 2.5rem;

  /* control heights (button/input sizing) */
  --shell-control-height-sm: var(--shell-padding-2xl);
  --shell-control-height-md: var(--shell-padding-3xl);
  --shell-control-height-lg: calc(var(--shell-padding-3xl) + var(--shell-space-xs));

  /* — Radius — */
  --shell-radius-xs: 0.25rem;
  --shell-radius-sm: 0.5rem;
  --shell-radius-md: 0.75rem;
  --shell-radius-lg: 1rem;
  --shell-radius-xl: 1.5rem;
  --shell-radius-full: 999px;

  /* — Shadows — */
  --shell-shadow-color-small: color-mix(in oklch, var(--shell-foreground-primary) 3%, transparent);
  --shell-shadow-color-medium: color-mix(in oklch, var(--shell-foreground-primary) 4%, transparent);
  --shell-shadow-color-large: color-mix(in oklch, var(--shell-foreground-primary) 5%, transparent);
  --shell-shadow-small: 0 1px 3px 0 var(--shell-shadow-color-small);
  --shell-shadow-medium: 0 1px 3px 0 var(--shell-shadow-color-small), 0 4px 8px -3px var(--shell-shadow-color-medium);
  --shell-shadow-large: 0 1px 4px 0 var(--shell-shadow-color-small), 0 6px 10px -2px var(--shell-shadow-color-large);

  /* — Type — */
  --font-shell-sans: 'Selecta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-shell-serif: 'CaslonIonic', Georgia, 'Times New Roman', serif;
  --font-shell-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --text-shell-heading-xl: 1.5rem;
  --text-shell-heading-lg: 1.25rem;
  --text-shell-heading-md: 1.125rem;
  --text-shell-heading-sm: 1rem;
  --text-shell-body-lg: 1.125rem;
  --text-shell-body-md: 1rem;
  --text-shell-body-sm: 0.875rem;
  --text-shell-body-xs: 0.75rem;
  --shell-tracking-eyebrow: 0.08em;

  /* — Interaction — */
  --shell-interaction-scale-hover: 1.04;
  --shell-interaction-scale-press: 0.97;
  --shell-motion-duration-fast: 120ms;
  --shell-motion-duration-interactive: 200ms;

  /* ── Legacy playground variables remapped onto Wabi tokens ──
     Everything in styles.css that uses these now renders in Wabi. */
  --bg:           var(--shell-background-page);
  --panel:        var(--shell-background-foreground);
  --panel-soft:   var(--shell-background-secondary);
  --ink:          var(--shell-foreground-primary);
  --ink-soft:     var(--shell-foreground-secondary);
  --ink-faint:    var(--shell-foreground-tertiary);
  --line:         var(--shell-border-subtle);
  --line-strong:  var(--shell-border-strong);
  --accent:       var(--shell-primary);
  --accent-ink:   var(--shell-primary-foreground);
  --bad:          var(--shell-destructive);
  --good:         var(--shell-foreground-positive);

  --radius:       var(--shell-radius-lg);
  --radius-sm:    var(--shell-radius-md);
  --radius-tile:  var(--shell-radius-xl);
  --radius-pill:  var(--shell-radius-full);

  --shadow-sm:   var(--shell-shadow-small);
  --shadow-md:   var(--shell-shadow-medium);
  --shadow-hero: var(--shell-shadow-large);

  --sans: var(--font-shell-sans);
  --mono: var(--font-shell-mono);
}