/* =========================================================================
   TheSSS AI — design tokens
   The only place raw colours, sizes, radii, shadows and timings are defined.
   Everything else refers to these custom properties.

   Theming: light is the default. Dark applies when the OS prefers it and the
   visitor has not picked a theme, or whenever <html data-theme="dark">.
   .theme-ink switches a single section (or element) to the dark palette.
   ========================================================================= */

:root {
    /* --- Brand (sampled from the logo: pink → violet → indigo) --------- */
    --brand-pink: #f72c8f;
    --brand-magenta: #d63ac4;
    --brand-violet: #9b3bea;
    --brand-indigo: #6366f1;
    --gradient-brand: linear-gradient(100deg, #f72c8f 0%, #b83be6 50%, #6366f1 100%);
    /* Deeper variant: keeps white text at WCAG AA contrast */
    --gradient-brand-deep: linear-gradient(100deg, #d4207c 0%, #8f30d9 50%, #5b3ee8 100%);

    /* --- Ink: violet-tinted neutrals ------------------------------------ */
    --ink-950: #0b0918;
    --ink-900: #121026;
    --ink-800: #1c1935;
    --ink-700: #2b2748;
    --ink-600: #4a4566;
    --ink-500: #6b6585;
    --ink-400: #9a94b2;
    --ink-300: #c9c4da;
    --ink-200: #e6e2f1;
    --ink-100: #f1eff8;
    --ink-50: #f8f7fd;

    /* --- Typography ------------------------------------------------------ */
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    --text-2xl: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
    --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
    --text-display: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);

    --leading-tight: 1.04;
    --leading-snug: 1.25;
    --leading-normal: 1.6;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* --- Space (4px base) ------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-space: clamp(4.5rem, 3rem + 5vw, 7.5rem);

    /* --- Layout ---------------------------------------------------------- */
    --container: 1200px;
    --container-narrow: 760px;
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);
    --header-h: 68px;

    /* --- Shape ----------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 150ms;
    --duration: 250ms;
    --duration-slow: 700ms;

    /* --- Layers ---------------------------------------------------------- */
    --z-header: 50;
    --z-overlay: 80;

    /* --- Semantic colours: light ---------------------------------------- */
    color-scheme: light;
    --color-bg: #fbfaff;
    --color-bg-subtle: #f4f2fb;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #e6e2f1;
    --color-border-strong: #cfc9e2;
    --color-text: #15122b;
    --color-text-muted: #555070;
    --color-text-subtle: #736e8c;
    --color-accent: #7232e6;
    --color-accent-hover: #5b21c9;
    --color-accent-soft: #f0e9ff;
    --color-accent-contrast: #ffffff;
    --color-highlight: #d4207c;
    --color-success: #0d7a4c;
    --color-success-soft: #e3f5ec;
    --color-warning: #8f5400;
    --color-warning-soft: #fdf1d8;
    --color-danger: #b8233f;
    --color-danger-soft: #fce8ec;
    --color-focus: #7232e6;
    --color-grid-line: rgba(91, 33, 201, 0.07);
    --color-header-bg: rgba(251, 250, 255, 0.82);
    --shadow-sm: 0 1px 2px rgba(21, 18, 43, 0.06);
    --shadow-md: 0 2px 4px rgba(21, 18, 43, 0.04), 0 8px 24px -8px rgba(21, 18, 43, 0.12);
    --shadow-lg: 0 4px 8px rgba(21, 18, 43, 0.04), 0 28px 56px -20px rgba(60, 24, 130, 0.28);
    --shadow-glow: 0 8px 28px -6px rgba(183, 40, 160, 0.45);

    /* Toggled with the theme (used by the sun/moon icons) */
    --show-when-light: inline-block;
    --show-when-dark: none;
}

/* --- Semantic colours: dark (OS preference, no explicit choice) --------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #0b0918;
        --color-bg-subtle: #100e21;
        --color-surface: #15122a;
        --color-surface-raised: #1c1935;
        --color-border: #2a2645;
        --color-border-strong: #3d3862;
        --color-text: #f1effa;
        --color-text-muted: #b4aeca;
        --color-text-subtle: #8f89a8;
        --color-accent: #b197fc;
        --color-accent-hover: #cbbcfe;
        --color-accent-soft: rgba(177, 151, 252, 0.13);
        --color-accent-contrast: #0b0918;
        --color-highlight: #ff6fb5;
        --color-success: #5fd9a0;
        --color-success-soft: rgba(95, 217, 160, 0.12);
        --color-warning: #f5c06a;
        --color-warning-soft: rgba(245, 192, 106, 0.12);
        --color-danger: #ff8aa5;
        --color-danger-soft: rgba(255, 138, 165, 0.12);
        --color-focus: #b197fc;
        --color-grid-line: rgba(177, 151, 252, 0.07);
        --color-header-bg: rgba(11, 9, 24, 0.78);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 56px -20px rgba(0, 0, 0, 0.75);
        --shadow-glow: 0 8px 28px -6px rgba(214, 58, 196, 0.5);
        --show-when-light: none;
        --show-when-dark: inline-block;
    }
}

/* --- Semantic colours: dark (explicit choice, or an ink section) -------- */
:root[data-theme="dark"],
.theme-ink {
    color-scheme: dark;
    --color-bg: #0b0918;
    --color-bg-subtle: #100e21;
    --color-surface: #15122a;
    --color-surface-raised: #1c1935;
    --color-border: #2a2645;
    --color-border-strong: #3d3862;
    --color-text: #f1effa;
    --color-text-muted: #b4aeca;
    --color-text-subtle: #8f89a8;
    --color-accent: #b197fc;
    --color-accent-hover: #cbbcfe;
    --color-accent-soft: rgba(177, 151, 252, 0.13);
    --color-accent-contrast: #0b0918;
    --color-highlight: #ff6fb5;
    --color-success: #5fd9a0;
    --color-success-soft: rgba(95, 217, 160, 0.12);
    --color-warning: #f5c06a;
    --color-warning-soft: rgba(245, 192, 106, 0.12);
    --color-danger: #ff8aa5;
    --color-danger-soft: rgba(255, 138, 165, 0.12);
    --color-focus: #b197fc;
    --color-grid-line: rgba(177, 151, 252, 0.07);
    --color-header-bg: rgba(11, 9, 24, 0.78);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 56px -20px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 8px 28px -6px rgba(214, 58, 196, 0.5);
    --show-when-light: none;
    --show-when-dark: inline-block;
}