/* =========================================================================
   INVRSYS DESIGN TOKENS
   The INVRSYS design language (the design-system artifact the redesign was
   built from): dark first, sharp edges, logo blue leads, logo brick is the
   rare accent. Light is a full second theme, not an afterthought.

   This file is the single source of truth. Everything else - the Tailwind
   @theme in tailwind/input.css (and its fallback in
   templates/includes/tailwind_theme.html), components.css, site.css and the
   inline styles left in the templates - resolves back to these properties.

   THEMES. :root carries Dark. [data-theme="light"] on <html> swaps every
   colour token at once. The attribute is set before first paint by the inline
   script in base.html, from the visitor's saved choice, else their OS
   preference, else Dark. The token NAMES are unchanged from the previous
   design (ink-900 is still "the page", fg is still "body text"), so every page
   built on them follows the theme without its own changes.

   Contrast: body text, muted text and links all pass 4.5:1 on the page and on
   panels in both themes; brand-600 under white text measures 5.8:1.
   ========================================================================= */

:root {
    color-scheme: dark;

    /* ---- Surfaces: page, panels, hover, borders ------------------------- */
    --ink-950: #05060a;   /* recessed: inputs, wells, code */
    --ink-900: #07080d;   /* the page. Near-black with a blue cast, never #000 */
    --ink-850: #0c0e16;   /* panels, bands */
    --ink-800: #191c2a;   /* hover surface */
    --ink-750: #12141f;   /* raised: menus, the featured card */
    --ink-700: #252a3d;   /* hairline borders */
    --ink-600: #363c54;   /* stronger dividers */
    --ink-500: #626a94;   /* control borders: 3:1 on page and panel */

    /* ---- Text ladder ------------------------------------------------------ */
    --fg: #eceef5;
    --fg-strong: #f6f7fb;
    --fg-muted: #b4b8cf;
    --fg-subtle: #9aa0bd;
    --fg-faint: #7a80a2;

    /* ---- Brand: the logo blue ------------------------------------------------
       600 fills buttons (white text 5.8:1); 500 is the exact logo blue, for
       marks and display accents only; 300 is link and eyebrow text. */
    --brand-700: #2c41b8;
    --brand-600: #3a55e6;
    --brand-500: #5170ff;
    --brand-300: #96a8ff;
    --brand-200: #bcc8ff;
    --brand-soft: #18235e;          /* selected and info backgrounds */
    --logo-blue: #5170ff;

    /* ---- The logo brick: at most once per view --------------------------- */
    --brick: #bd4c05;               /* fill, white text 5.0:1 */
    --brick-text: #e98d4e;
    --brick-soft: #3b1701;

    /* ---- Cards ------------------------------------------------------------ */
    --card: #0c0e16;
    --card-raised: #12141f;
    --card-line: #252a3d;
    --card-line-hover: #363c54;

    /* ---- Status: always with an icon or a word --------------------------- */
    --accent-green: #3dd68c;
    --accent-orange: #f5c451;
    --accent-red: #ff6b74;
    --accent-cyan: #5cc8e6;

    /* ---- Elevation -------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 0 1px rgba(81, 112, 255, 0.45), 0 8px 32px rgba(81, 112, 255, 0.32);

    /* ---- The frosted nav island ------------------------------------------ */
    --island-bg: linear-gradient(180deg, rgba(150, 168, 255, 0.16), rgba(150, 168, 255, 0.05));
    --island-edge: rgba(188, 200, 255, 0.20);
    --island-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 48px rgba(0, 0, 0, 0.45);
    --island-fallback: rgba(18, 20, 31, 0.94);

    /* ---- Comparison column tint ------------------------------------------ */
    --us-tint: rgba(24, 35, 94, 0.45);

    /* ---- Light "paper" surfaces (kept for pages that use them) ----------- */
    --paper: #e6e3db;
    --paper-bright: #f0eee8;
    --paper-tint: #f8f6f1;
    --paper-line: #d7d4cb;
    --on-paper: #1a1a1c;
    --on-paper-muted: #3c3c42;
    --on-paper-subtle: #5a5a60;
    --on-paper-faint: #6a6a6e;

    /* ---- Type -------------------------------------------------------------
       Geist sets everything. Audiowide is the brand face: the wordmark and the
       home hero headline only, never body copy, buttons or labels. JetBrains
       Mono sets numbers that should read as data. */
    --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-brand: 'Audiowide', 'Geist', ui-sans-serif, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* ---- Shape ------------------------------------------------------------ */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* ---- Layout ----------------------------------------------------------- */
    --width-wide: 1200px;
    --width-medium: 1060px;
    --width-narrow: 760px;

    /* ---- Motion ----------------------------------------------------------- */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-std: cubic-bezier(0.2, 0, 0, 1);

    /* =====================================================================
       LEGACY ALIASES
       Every variable the templates and style.css already reference, re-pointed
       at the ramps above. These exist so that pages not yet converted - the
       Razorpay checkout in particular, which is deliberately untouched - keep
       rendering correctly through the migration instead of losing their
       colours one stage at a time. Remove an alias only once nothing uses it.
       ===================================================================== */
    --primary: var(--brand-600);
    --primary-dark: var(--brand-700);
    --bg-body: var(--ink-900);
    --bg-paper: var(--ink-850);
    --text-main: var(--fg-muted);
    --text-muted: var(--fg-faint);
    --white: var(--fg-strong);
    --border-color: var(--ink-700);
    --success: var(--accent-green);
    --warning: var(--accent-orange);
    --danger: var(--accent-red);
    --info: var(--accent-cyan);

    --container-width: var(--width-wide);
    --header-height: 80px;
    --announcement-height: 0px;
}

/* ---- Light theme ------------------------------------------------------------
   Same names, light values. Page is ink-50 (#f6f7fb), panels are white. */
:root[data-theme="light"] {
    color-scheme: light;

    --ink-950: #eceef5;
    --ink-900: #f6f7fb;
    --ink-850: #ffffff;
    --ink-800: #eef1ff;
    --ink-750: #ffffff;
    --ink-700: #d9dbe8;
    --ink-600: #b4b8cf;
    --ink-500: #7a81a1;

    --fg: #0c0e16;
    --fg-strong: #07080d;
    --fg-muted: #2b3048;
    --fg-subtle: #4a5070;
    --fg-faint: #646a8a;

    --brand-300: #3a55e6;
    --brand-200: #2c41b8;
    --brand-soft: #eef1ff;

    --brick-text: #9c3e04;
    --brick-soft: #fdf1e8;

    --card: #ffffff;
    --card-raised: #ffffff;
    --card-line: #d9dbe8;
    --card-line-hover: #b4b8cf;

    --accent-green: #15703f;
    --accent-orange: #8a6100;
    --accent-red: #c62a35;
    --accent-cyan: #0b7fa0;

    --shadow-sm: 0 1px 2px rgba(12, 14, 22, 0.06);
    --shadow-md: 0 4px 16px rgba(12, 14, 22, 0.08);
    --shadow-lg: 0 16px 48px rgba(12, 14, 22, 0.14);
    --shadow-glow: 0 0 0 1px rgba(81, 112, 255, 0.35), 0 8px 24px rgba(81, 112, 255, 0.18);

    --island-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(238, 241, 255, 0.58));
    --island-edge: rgba(12, 14, 22, 0.08);
    --island-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 40px rgba(12, 14, 22, 0.10);
    --island-fallback: rgba(255, 255, 255, 0.96);

    --us-tint: #f3f5ff;
}