/*
 * Roboteka — Design Tokens
 * Single source of truth for CSS custom properties.
 *
 * Naming conventions in this file:
 *   - Brand colours:           --brand-*
 *   - Logo tile colours:       --tile-*
 *   - Semantic colours:        --success / --warning / --danger / --info (+ -bg)
 *   - Shadows / motion / type: --shadow-* / --ease / --dur-* / --font-* / --t-*
 *   - Legacy short aliases used by views (do NOT remove without sweep):
 *       --p, --p-d, --p-bg                — primary action
 *       --g1..--g7                        — neutral/ink ramp (indigo-tinted)
 *       --bg, --s, --bd                   — page background, surface, border
 *       --r, --rsm                        — corner radii
 *       --hh, --sw                        — header height, sidebar width
 *   - New descriptive aliases used by newer views:
 *       --ink, --ink-mid, --ink-soft, --ink-faint
 *       --surface, --surface-2, --surface-3, --bg-deep
 *       --border, --border-strong, --border-str (iframe specific, 0.16α)
 *
 * Typography and base body rules live in app.css — this file is variables only.
 * Font @import is intentionally absent: fonts are loaded via <link> from the
 * layout HTML to avoid render-blocking @import chains.
 */

:root {
  /* ──────────── Brand colours (Spectrum palette) ──────────── */
  --brand-violet:   #5B4FE8;   /* primary action */
  --brand-indigo:   #1A1E5C;   /* deep brand, primary text */
  --brand-coral:    #FF6B4A;   /* highlight / hot */
  --brand-amber:    #F2B33D;   /* warm accent / ratings */
  --brand-cream:    #F4F0E8;   /* page bg, on-dark fg */

  /* Logo tile colours (same order as the 4-tile mark) */
  --tile-1: #5B4FE8;
  --tile-2: #1A1E5C;
  --tile-3: #FF6B4A;
  --tile-4: #F2B33D;

  /* ──────────── Primary action (legacy alias) ──────────── */
  --p:    #5B4FE8;
  --p-d:  #4c41d4;
  --p-bg: rgba(91, 79, 232, 0.09);

  /* ──────────── Neutral ramp (legacy aliases) ──────────── */
  --g1: #1A1E5C;                      /* ink */
  --g2: #5a5d7a;                      /* ink-mid */
  --g3: #9094a8;                      /* ink-soft */
  --g4: #c4c6d2;                      /* ink-faint */
  --g5: rgba(26, 30, 92, 0.18);       /* border-strong */
  --g6: rgba(26, 30, 92, 0.12);
  --g7: rgba(26, 30, 92, 0.05);

  /* ──────────── Surfaces ──────────── */
  --bg:         #F4F0E8;   /* page background, warm cream */
  --bg-deep:    #ECE7DB;   /* recessed wells, dividers */
  --s:          #FFFDF7;   /* legacy surface alias */
  --surface:    #FFFDF7;   /* cards, panels */
  --surface-2:  #FAF6EC;   /* subtle alternation */
  --surface-3:  #FFFFFF;   /* pure white inputs / modals */
  --ink-bg:     #0E1133;   /* dark surface */
  --ink-bg-2:   #1A1E5C;   /* dark surface (lifted) */

  /* ──────────── Text (new descriptive aliases) ──────────── */
  --ink:        #1A1E5C;   /* primary text */
  --ink-mid:    #5a5d7a;   /* secondary text */
  --ink-soft:   #9094a8;   /* tertiary text, captions */
  --ink-faint:  #c4c6d2;   /* placeholder, disabled */
  --on-dark:    #F4F0E8;   /* text on --ink-bg */
  --on-dark-mid: rgba(244, 240, 232, 0.65);

  /* ──────────── Lines & borders ──────────── */
  --bd:             rgba(26, 30, 92, 0.10);   /* legacy alias */
  --border:         rgba(26, 30, 92, 0.10);
  --border-strong:  rgba(26, 30, 92, 0.18);
  --border-str:     rgba(26, 30, 92, 0.16);   /* iframe-specific */
  --border-on-dark: rgba(244, 240, 232, 0.12);

  /* ──────────── Semantic ──────────── */
  --success:     #2A8A5C;
  --success-bg:  #E4F2EA;
  --warning:     #C97B17;
  --warning-bg:  #FBEFD7;
  --danger:      #D9442E;
  --danger-bg:   #FBE5DE;
  --info:        #3C49C8;
  --info-bg:     #E3E5F7;

  /* ──────────── Layout sizes ──────────── */
  --hh: 56px;      /* header height */
  --sw: 220px;     /* sidebar width */

  /* ──────────── Spacing scale (4px base) ──────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ──────────── Radii ──────────── */
  --r:     10px;    /* legacy alias, buttons / sidebar items */
  --rsm:   6px;     /* legacy alias, small chips, inputs */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --r-icon: 22%;

  /* ──────────── Shadows (warm, low-saturation) ──────────── */
  --shadow-1:     0 1px 2px rgba(20, 24, 60, 0.05);
  --shadow-2:     0 2px 8px rgba(20, 24, 60, 0.06), 0 1px 2px rgba(20, 24, 60, 0.04);
  --shadow-3:     0 8px 24px -8px rgba(20, 24, 60, 0.12), 0 2px 6px rgba(20, 24, 60, 0.06);
  --shadow-4:     0 24px 60px -20px rgba(20, 24, 60, 0.18), 0 4px 12px rgba(20, 24, 60, 0.06);
  --shadow-focus: 0 0 0 3px rgba(91, 79, 232, 0.28);

  /* ──────────── Type — families ──────────── */
  --font-display: 'Onest', system-ui, -apple-system, sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ──────────── Type — display scale (marketing / hero only) ──────────── */
  --t-display-xl: 88px;
  --t-display:    64px;
  --t-h1:         44px;
  --t-h2:         32px;
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-caption:    12px;
  --t-overline:   11px;

  /* ──────────── Motion ──────────── */
  --ease:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}