/*
 * UltraFrontend tokens — the "New" design of the Ultrafast Search platform (October 2026).
 * Exact values from ultrafastsearch-platform public/ui/v2/tokens.css + console.css.
 *
 * Light is the default theme. Dark is opt-in: <html data-theme="dark">.
 * Never write a colour, radius or shadow in a component: use these variables.
 */
:root {
  /* ── Surfaces ── */
  --bg-page: #EDF0F7;          /* cool light canvas behind everything */
  --bg-surface: #FFFFFF;       /* cards, inputs, header cards */
  --bg-muted: #F5F6FB;         /* row hover, chips, quiet fills */
  --bg-sunken: #E8EBF4;        /* segmented-control track */
  --bg-purple-tint: rgba(79, 70, 229, 0.09);
  --border: #E3E6F0;
  --border-strong: #CFD4E4;    /* inputs, secondary buttons */

  /* ── Text ── */
  --text-primary: #141729;
  --text-secondary: #4A506D;
  --text-muted: #6E7493;
  --text-link: #4338CA;
  --text-on-brand: #FFFFFF;

  /* ── Brand: indigo → violet ── */
  --color-primary: #4F46E5;
  --color-primary-dark: #4338CA;
  --color-primary-light: #6366F1;
  --color-secondary: #7C3AED;
  --color-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --color-gradient-hover: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  --color-primary-a10: rgba(79, 70, 229, 0.09);
  --color-primary-a20: rgba(79, 70, 229, 0.24);
  --brand-glow: rgba(79, 70, 229, 0.55);   /* coloured shadow under gradient things */

  /* ── Status (background / text / solid) ── */
  --color-success: #10B981; --color-success-light: #E1F5EC; --color-success-text: #0B8A5F;
  --color-warning: #F59E0B; --color-warning-light: #FCF1D9; --color-warning-text: #A86204;
  --color-danger:  #EF4444; --color-danger-light:  #FDEAEE; --color-danger-text:  #C92D48;
  --color-info:    #3B82F6; --color-info-light:    #E4EDFD; --color-info-text:    #1D5FD8;

  /* ── Signals: one colour, one meaning ── */
  --sig-fast: #F59E0B;  --sig-fast-soft: rgba(245, 158, 11, 0.14);  --sig-fast-ink: #B45309;   /* speed only */
  --sig-exact: #14B8A6; --sig-exact-soft: rgba(20, 184, 166, 0.14); --sig-exact-ink: #0F766E;  /* accuracy, success */
  --sig-found: #7C3AED; --sig-found-soft: rgba(124, 58, 237, 0.12); --sig-found-ink: #6D28D9;  /* discovery, search */

  /* ── Icon tiles (tint background / ink). t-brand follows the palette; the others are fixed. ── */
  --t-brand:  #EFEAFE; --c-brand:  #6D28D9;
  --t-violet: #EFEAFE; --c-violet: #6D28D9;
  --t-teal:   #DEF4F0; --c-teal:   #0F766E;
  --t-amber:  #FCF0DA; --c-amber:  #A85A05;
  --t-rose:   #FCE8EE; --c-rose:   #BE123C;
  --t-sky:    #E3EEFD; --c-sky:    #1D4ED8;

  /* ── The dark rail (dark in BOTH themes) ── */
  --rail: #0D0F21; --rail-2: #171A34; --rail-3: #252A50;
  --rail-ink: #C6C9E2; --rail-ink-2: #8186AB; --rail-strong: #FFFFFF; --rail-good: #34D399;

  /* ── Night cards (hero numbers, the main chart, "your plan") ── */
  --night-1: #13153A; --night-2: #1E1B4B; --night-3: #352A82; --night-deep: #140F3D;
  --night-gradient: linear-gradient(150deg, #13153A 0%, #1E1B4B 55%, #352A82 100%);
  --night-shadow: 0 22px 50px -28px rgba(19, 21, 58, 0.8);
  --night-orb: rgba(167, 139, 250, 0.28);   /* the soft light in a night card's corner */

  /* ── Header-card glow and section heading band ── */
  --head-a: rgba(99, 91, 255, 0.15);
  --head-b: rgba(124, 58, 237, 0.06);
  --band-bg: linear-gradient(90deg, #DCD8FB 0%, #ECE5FD 100%);
  --band-line: rgba(79, 70, 229, 0.30);
  --band-ink: #2E2A8F;

  /* ── Charts ── */
  --chart-bar: #5850EC;
  --chart-bar-muted: #C7C4F7;
  --chart-grid: #E9ECF4;
  --chart-line: #0F9D6B;       /* a second series: never a shade of the bar colour */

  /* ── Type ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;   /* titles only, 700–800 */
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;

  /* ── Shape ── */
  --radius-sm: 9px;    /* inputs */
  --radius: 12px;      /* nav items, small boxes */
  --radius-lg: 16px;   /* alerts, choice cards */
  --radius-xl: 22px;   /* cards, header cards */
  --radius-pill: 999px;/* buttons, tabs, chips, badges */
  --shadow-sm: 0 1px 2px rgba(20, 23, 41, 0.04), 0 12px 32px -20px rgba(20, 23, 41, 0.20);
  --shadow:    0 1px 2px rgba(20, 23, 41, 0.04), 0 12px 32px -20px rgba(20, 23, 41, 0.20);
  --shadow-lg: 0 28px 70px -24px rgba(13, 15, 33, 0.42);

  /* ── Layout ── */
  --rail-width: 256px;
  --content-max: 1480px;

  /* ── Motion ── */
  --ease-fast: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg-page: #090B17;
  --bg-surface: #11142A;
  --bg-muted: #161A33;
  --bg-sunken: #0C0F22;
  --bg-purple-tint: rgba(143, 137, 255, 0.13);
  --border: #232849;
  --border-strong: #343A66;

  --text-primary: #EDEFFB;
  --text-secondary: #B5B9D6;
  --text-muted: #8D92B4;
  --text-link: #B9B4FF;

  --color-primary: #8F89FF;
  --color-primary-dark: #7C76F2;
  --color-primary-light: #B9B4FF;
  --color-gradient: linear-gradient(135deg, #5B52EE 0%, #8B5CF6 100%);
  --color-gradient-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --color-primary-a10: rgba(143, 137, 255, 0.13);
  --color-primary-a20: rgba(143, 137, 255, 0.32);
  --brand-glow: rgba(96, 88, 240, 0.6);

  --color-success-light: rgba(52, 211, 153, 0.13);  --color-success-text: #34D399;
  --color-warning-light: rgba(251, 191, 36, 0.13);  --color-warning-text: #FBBF24;
  --color-danger-light:  rgba(251, 113, 133, 0.13); --color-danger-text:  #FB7185;
  --color-info-light:    rgba(96, 165, 250, 0.13);  --color-info-text:    #60A5FA;

  --sig-fast-ink: #FCD34D; --sig-exact-ink: #5EEAD4; --sig-found-ink: #C4B5FD;

  --t-brand:  rgba(167, 139, 250, 0.15); --c-brand:  #C4B5FD;
  --t-violet: rgba(167, 139, 250, 0.15); --c-violet: #C4B5FD;
  --t-teal:   rgba(45, 212, 191, 0.13);  --c-teal:   #5EEAD4;
  --t-amber:  rgba(251, 191, 36, 0.13);  --c-amber:  #FCD34D;
  --t-rose:   rgba(251, 113, 133, 0.13); --c-rose:   #FDA4AF;
  --t-sky:    rgba(96, 165, 250, 0.14);  --c-sky:    #93C5FD;

  --rail: #060815; --rail-2: #12152C; --rail-3: #1F2448;

  --head-a: rgba(143, 137, 255, 0.16);
  --head-b: rgba(167, 139, 250, 0.05);
  --band-bg: linear-gradient(90deg, rgba(143, 137, 255, 0.30) 0%, rgba(167, 139, 250, 0.16) 100%);
  --band-line: rgba(143, 137, 255, 0.40);
  --band-ink: #E4E2FF;

  --chart-bar: #8F89FF;
  --chart-bar-muted: #3A3580;
  --chart-grid: #1F2443;
  --chart-line: #34D399;

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 34px -20px rgba(0, 0, 0, 0.75);
  --shadow:    0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 34px -20px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}