/* =========================================================
   SERVOMIX — DESIGN TOKENS
   File: css/core/tokens.css

   The only file allowed to hold raw colour, size and timing
   values. Three layers:
     1. Primitives   raw values            (--p-*)
     2. Semantic     what a value is for   (--ink, --surface, --r-card ...)
     3. Component    per-component knobs   (--btn-*, --card-*, ...)
   Components use layers 2 and 3 only. Contrast ratios are
   measured (WCAG 2.x) and noted next to each text colour.
========================================================= */

/* ---------------------------------------------------------
   FONTS (self-hosted, SIL OFL; licences in assets/fonts)
   Archivo: wdth 62-125, wght 100-900. Paths are relative to
   this file, so they work from any page depth.
--------------------------------------------------------- */

@font-face{
    font-family:"Archivo";
    font-style:normal;
    font-weight:100 900;
    font-stretch:62% 125%;
    font-display:swap;
    src:url("../../assets/fonts/archivo-var-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
    font-family:"Archivo";
    font-style:normal;
    font-weight:100 900;
    font-stretch:62% 125%;
    font-display:swap;
    src:url("../../assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
    /* includes the rupee sign U+20B9 */
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
    font-family:"Noto Sans Devanagari";
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url("../../assets/fonts/noto-sans-devanagari-var.woff2") format("woff2");
    unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}


:root{

    /* =====================================================
       1. PRIMITIVES
    ===================================================== */

    --p-ink-900:#0c1626;
    --p-ink-700:#475467;
    --p-ink-600:#5b6b82;
    --p-ink-300:#c3ccd9;
    --p-ink-150:#dde3ec;
    --p-mist-100:#f3f6fb;
    --p-mist-50:#f8fafd;
    --p-white:#ffffff;

    --p-blue-700:#005080;
    --p-blue-600:#00629c;
    --p-blue-500:#0073b6;
    --p-blue-400:#368dc2;
    --p-blue-300:#6293b4;
    --p-blue-200:#95acbc;
    --p-blue-100:#d5e5f0;
    --p-blue-50:#eef6fa;

    --p-mint-700:#08735f;
    --p-mint-400:#32cdb0;
    --p-mint-50:#e9f8f4;

    --p-red-700:#b42318;
    --p-red-50:#fdecea;
    --p-amber-700:#b54708;
    --p-amber-50:#fdf3e7;

    --p-console-900:#0b1220;
    --p-console-text:#e6edf7;
    --p-console-muted:#94a3b8;

    --p-mesh-sky:#bfdbff;
    --p-mesh-mint:#c8f5ea;
    --p-mesh-ice:#e3ecfa;


    /* =====================================================
       2. SEMANTIC (DEFAULT: PURE OBSIDIAN DARK THEME)
    ===================================================== */
    color-scheme:dark;

    /* ---------- Text ---------- */
    --ink:#f8fafc;            /* 17.5:1 crisp white */
    --ink-2:#cbd5e1;          /* 10.2:1 high-contrast secondary */
    --ink-3:#94a3b8;          /* 6.5:1 clean muted slate */
    --ink-on-accent:#ffffff;  /* 5.2:1 on --accent */

    /* ---------- Surfaces ---------- */
    --page:#080a0f;           /* deep obsidian ground */
    --surface:#0e1219;        /* refined card / container */
    --surface-sunken:#06080c;
    --glass:rgba(14,18,25,.72);
    --glass-strong:rgba(16,21,30,.88);
    --glass-edge:rgba(96,165,250,.20);
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --line-control:rgba(255,255,255,.24);

    /* ---------- Brand / action ---------- */
    --accent:#3b82f6;        /* clean electric blue */
    --accent-strong:#60a5fa; /* hover */
    --accent-soft:rgba(59,130,246,.12);
    --accent-tint:rgba(59,130,246,.22);
    --accent-glow:rgba(59,130,246,.40);

    /* ---------- Status (semantic only, never decoration) ---------- */
    --up:#10b981;
    --up-fill:#059669;
    --up-soft:rgba(16,185,129,.15);
    --down:#ef4444;
    --down-soft:rgba(239,68,68,.15);
    --warn:#f59e0b;
    --warn-soft:rgba(245,158,11,.15);

    /* ---------- The one dark surface (Launcher console) ---------- */
    --console:#06080c;
    --console-ink:#f8fafc;
    --console-ink-2:#94a3b8;

    /* ---------- Mesh background ---------- */
    --mesh-1:rgba(37,99,235,.18);
    --mesh-2:rgba(59,130,246,.12);
    --mesh-3:rgba(99,102,241,.10);

    /* ---------- Focus ---------- */
    --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);


    /* ---------- Typography ---------- */
    --font-sans:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-hi:"Noto Sans Devanagari", "Archivo", system-ui, sans-serif;

    /* 1.25 scale, base 16px. clamp(min, fluid, max) */
    --t-display:clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40 -> 72 */
    --t-h1:clamp(2rem, 1.45rem + 2.2vw, 3.0625rem);      /* 32 -> 49 */
    --t-h2:clamp(1.625rem, 1.25rem + 1.5vw, 2.4375rem);  /* 26 -> 39 */
    --t-h3:clamp(1.25rem, 1.1rem + .6vw, 1.5625rem);     /* 20 -> 25 */
    --t-lead:clamp(1.125rem, 1.05rem + .3vw, 1.25rem);   /* 18 -> 20 */
    --t-body:1rem;                                        /* 16 */
    --t-small:.875rem;                                    /* 14 */
    --t-micro:.75rem;                                     /* 12, badges only */

    --lh-display:1.02;
    --lh-heading:1.1;
    --lh-h3:1.25;
    --lh-body:1.6;
    --lh-small:1.5;

    --w-display:800;
    --w-h1:750;
    --w-h2:700;
    --w-h3:650;
    --w-strong:600;
    --w-body:400;

    /* font-stretch (Archivo width axis) */
    --wd-display:118%;
    --wd-h1:112%;
    --wd-h2:108%;
    --wd-text:100%;

    --measure:68ch;


    /* ---------- Shape (Consistent, Refined Enterprise System) ---------- */
    --r-pill:8px;       /* chips, toggles, badges, tabs */
    --r-control:8px;    /* buttons, inputs, selects */
    --r-card:12px;      /* cards, plan cards, tiles, FAQ items */
    --r-panel:16px;     /* glass panels: launcher, modals, hero containers */


    /* ---------- Elevation (Dark bluish shadows) ---------- */
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-float:0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.6);
    --shadow-knob:0 1px 3px rgba(0,0,0,.7);
    --glass-blur:blur(24px) saturate(175%);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,.10);
    --shimmer:rgba(255,255,255,.06);
    --on-accent-tint:rgba(255,255,255,.2);   /* badge inside a selected segment */


    /* ---------- Spacing (4px base) ---------- */
    --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;

    --section-y:var(--s-8);   /* 64 mobile, 96 from 1024 (see below) */
    --container:1280px;
    --gutter:16px;
    --nav-h:56px;


    /* ---------- Motion ---------- */
    --ease:cubic-bezier(.22,.61,.36,1);
    --dur-fast:160ms;
    --dur-base:280ms;
    --dur-reveal:600ms;
    --dur-mesh:40s;


    /* ---------- Layers ---------- */
    --z-mesh:-1;
    --z-raised:10;
    --z-sticky:100;
    --z-nav:1000;
    --z-overlay:2000;
    --z-toast:3000;


    /* =====================================================
       3. COMPONENT
    ===================================================== */

    --btn-h:48px;
    --btn-h-sm:44px;
    --btn-pad-x:20px;

    --field-h:48px;

    --card-pad:var(--s-5);
    --card-pad-lg:var(--s-6);

    --icon-sm:16px;
    --icon:20px;
    --icon-lg:24px;
}

@media (min-width:1024px){

    :root{
        --section-y:var(--s-9);
        --nav-h:64px;
    }
}


/* =====================================================
   4. THEMES (DARK / BLUISH DEFAULT & LIGHT OVERRIDE)
===================================================== */

html[data-theme="dark"],
:root[data-theme="dark"]{
    color-scheme:dark;

    /* ---------- Text ---------- */
    --ink:#f8fafc;
    --ink-2:#cbd5e1;
    --ink-3:#94a3b8;
    --ink-on-accent:#ffffff;

    /* ---------- Surfaces ---------- */
    --page:#080a0f;
    --surface:#0e1219;
    --surface-sunken:#06080c;
    --glass:rgba(14,18,25,.72);
    --glass-strong:rgba(16,21,30,.88);
    --glass-edge:rgba(96,165,250,.20);
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --line-control:rgba(255,255,255,.24);

    /* ---------- Brand / action ---------- */
    --accent:#3b82f6;
    --accent-strong:#60a5fa;
    --accent-soft:rgba(59,130,246,.12);
    --accent-tint:rgba(59,130,246,.22);
    --accent-glow:rgba(59,130,246,.40);

    /* ---------- Status ---------- */
    --up:#10b981;
    --up-fill:#059669;
    --up-soft:rgba(16,185,129,.15);
    --down:#ef4444;
    --down-soft:rgba(239,68,68,.15);
    --warn:#f59e0b;
    --warn-soft:rgba(245,158,11,.15);

    /* ---------- Console surface ---------- */
    --console:#06080c;
    --console-ink:#f8fafc;
    --console-ink-2:#94a3b8;

    /* ---------- Mesh background ---------- */
    --mesh-1:rgba(37,99,235,.18);
    --mesh-2:rgba(59,130,246,.12);
    --mesh-3:rgba(99,102,241,.10);

    /* ---------- Focus ---------- */
    --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

    /* ---------- Elevation ---------- */
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-float:0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.6);
    --shadow-knob:0 1px 3px rgba(0,0,0,.7);
    --glass-blur:blur(24px) saturate(175%);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,.10);
    --shimmer:rgba(255,255,255,.06);
    --on-accent-tint:rgba(255,255,255,.2);
}

html[data-theme="light"],
html.light,
:root[data-theme="light"]{
    color-scheme:light;

    /* ---------- Text ---------- */
    --ink:#0c1626;
    --ink-2:#2d3748;
    --ink-3:#4a5568;
    --ink-on-accent:#ffffff;

    /* ---------- Surfaces ---------- */
    --page:#f3f6fb;
    --surface:#ffffff;
    --surface-sunken:#f8fafd;
    --glass:rgba(255,255,255,.78);
    --glass-strong:rgba(255,255,255,.90);
    --glass-edge:rgba(12,22,38,.10);
    --line:rgba(12,22,38,.10);
    --line-strong:rgba(12,22,38,.18);
    --line-control:rgba(12,22,38,.30);

    /* ---------- Brand / action ---------- */
    --accent:#0061e0;
    --accent-strong:#004bb0;
    --accent-soft:#eef4ff;
    --accent-tint:#dbe7fd;
    --accent-glow:rgba(0,97,224,.30);

    /* ---------- Status ---------- */
    --up:#08735f;
    --up-fill:#059669;
    --up-soft:#e9f8f4;
    --down:#b42318;
    --down-soft:#fdecea;
    --warn:#b54708;
    --warn-soft:#fdf3e7;

    /* ---------- Console ---------- */
    --console:#0b1220;
    --console-ink:#e6edf7;
    --console-ink-2:#94a3b8;

    /* ---------- Mesh background ---------- */
    --mesh-1:rgba(191,219,255,.45);
    --mesh-2:rgba(200,245,234,.35);
    --mesh-3:rgba(227,236,250,.45);

    /* ---------- Focus ---------- */
    --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

    /* ---------- Elevation ---------- */
    --shadow-card:0 1px 3px rgba(12,40,90,.08), 0 8px 24px rgba(12,40,90,.06);
    --shadow-float:0 2px 6px rgba(12,40,90,.08), 0 18px 48px rgba(12,40,90,.12);
    --shadow-knob:0 1px 2px rgba(12,40,90,.2);
    --glass-blur:blur(24px) saturate(175%);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,.95);
    --shimmer:rgba(255,255,255,.6);
    --on-accent-tint:rgba(0,97,224,.1);
}