/* clawback.capital UI system — tokens (gh-628 / U1 gh-629).
 * Design of record: docs/design/ui-system.md §1. Names follow the LUTYO / shadcn
 * semantic model; values are ClawBack's. Dark is the default (:root); light is
 * `<html data-theme="light">`, or the browser preference when no `theme` cookie
 * has been set (the head script resolves that before first paint).
 *
 * KATANA does NOT read this file — it keeps generating from the frozen
 * services/dashboard/app/static/css/design-tokens.css. */

:root {
  color-scheme: dark;

  /* Brand ramp — identical in both modes */
  --brand-50: #EEF2FF; --brand-100: #E0E7FF; --brand-200: #C7D2FE; --brand-300: #A5B4FC;
  --brand-400: #818CF8; --brand-500: #6366F1; --brand-600: #4F46E5; --brand-700: #4338CA;
  --brand-800: #3730A3; --brand-900: #312E81; --brand-950: #1E1B4B;

  /* Semantic colours — dark */
  --background: #0A0E1A;
  --foreground: #E8EAF6;
  --card: #141826;
  --card-foreground: #E8EAF6;
  --primary: #6366F1;
  --primary-foreground: #FFFFFF;
  --secondary: #1B2030;
  --secondary-foreground: #E8EAF6;
  --muted: #1F2433;
  --muted-foreground: #9CA3AF;
  --accent: #1E1B4B;
  --accent-foreground: #E0E7FF;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --border: #2D3447;
  --input: #2D3447;
  --ring: #818CF8;
  --link: #818CF8;

  /* Selected text — the theme inverted: the highlight is the text colour, the text is the page colour.
     References, not values: declared once here, they follow every theme path below (toggle and browser preference). */
  --selection-bg: var(--foreground);
  --selection-fg: var(--background);

  /* ClawBack-only — numbers only for P&L, never chrome (the P&L colour rule) */
  --pnl-profit: #00FF00;
  --pnl-loss: #FF0000;
  --semantic-up: #3B82F6;
  --semantic-down: #EF4444;
  --semantic-alert: #F59E0B;
  --brand-crypto: #627EEA;
  --brand-stock: #FCD12A;
  --brand-stock-foreground: #FCD12A;   /* stock-yellow as TEXT; darkened in light mode for contrast */

  /* Overlays */
  --scrim: rgba(3, 5, 12, .72);
  --shadow-card: none;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .35);

  /* Type — Inter everywhere; script fallbacks for ar/fa/zh/ja/ko */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Vazirmatn", Tahoma,
               "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-display: 700 40px/48px var(--font-sans);
  --text-h1: 700 30px/36px var(--font-sans);
  --text-h2: 600 22px/28px var(--font-sans);
  --text-h3: 600 18px/24px var(--font-sans);
  --text-body: 400 14px/20px var(--font-sans);
  --text-body-md: 500 14px/20px var(--font-sans);
  --text-small: 400 13px/18px var(--font-sans);
  --text-caption: 500 12px/16px var(--font-sans);
  --text-label: 600 11px/13px var(--font-sans);
  --text-kpi: 700 30px/36px var(--font-sans);
  --tracking-label: .08em;

  /* Scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-control: 8px;   /* buttons, inputs, nav items */
  --radius-card: 12px;     /* cards, tiles */
  --radius-hero: 16px;     /* hero cards, the auth card */
  --radius-badge: 999px;

  /* Shell */
  --sidebar-w: 240px;
  --sidebar-rail-w: 64px;
  --header-h: 57px;
  --main-pad-y: 28px;
  --main-pad-x: 32px;
  --main-min-w: 960px;
  --drawer-w: 680px;
  --auth-card-w: 560px;
}

/* Light — explicit */
:root[data-theme="light"] {
  color-scheme: light;
  --background: #FAFAFA; --foreground: #14161F;
  --card: #FFFFFF; --card-foreground: #14161F;
  --primary: #4F46E5; --primary-foreground: #FFFFFF;
  --secondary: #F1F2F8; --secondary-foreground: #14161F;
  --muted: #F1F5F9; --muted-foreground: #65758B;
  --accent: #EEF2FF; --accent-foreground: #4338CA;
  --destructive: #EF4343; --destructive-foreground: #FFFFFF;
  --border: #E1E7EF; --input: #E1E7EF; --ring: #6366F1; --link: #4F46E5;
  --pnl-profit: #008F00; --pnl-loss: #D0342C; --brand-stock-foreground: #8A6D00;
  --scrim: rgba(20, 22, 31, .48);
  --shadow-card: 0 1px 2px rgba(15, 23, 41, .06);
  --shadow-pop: 0 8px 24px rgba(15, 23, 41, .14);
}

/* Light — browser preference, when no cookie decided (the head script sets
   data-theme before paint, so this branch is the no-JS safety net) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --background: #FAFAFA; --foreground: #14161F;
    --card: #FFFFFF; --card-foreground: #14161F;
    --primary: #4F46E5; --primary-foreground: #FFFFFF;
    --secondary: #F1F2F8; --secondary-foreground: #14161F;
    --muted: #F1F5F9; --muted-foreground: #65758B;
    --accent: #EEF2FF; --accent-foreground: #4338CA;
    --destructive: #EF4343; --destructive-foreground: #FFFFFF;
    --border: #E1E7EF; --input: #E1E7EF; --ring: #6366F1; --link: #4F46E5;
    --pnl-profit: #008F00; --pnl-loss: #D0342C; --brand-stock-foreground: #8A6D00;
    --scrim: rgba(20, 22, 31, .48);
    --shadow-card: 0 1px 2px rgba(15, 23, 41, .06);
    --shadow-pop: 0 8px 24px rgba(15, 23, 41, .14);
  }
}