/* ============================================
   DESIGN TOKENS — CompanyAura.
   DocsAura palette over Ogarniamy's structural system.
   Every page loads this first. Nothing else
   defines colors, type scale, spacing, or radii.
   ============================================ */

:root {
    /* ----- Color palette ----- */
    /* Brand primaries (DocsAura family) */
    --primary-purple: #0B0215;       /* deep ink — used as "depth" base */
    --primary-blue: #141EC8;         /* DocsAura ultramarine, main accent */
    --primary-blue-light: #2A34E0;
    --accent-magenta: #DC3CB4;       /* DocsAura magenta */
    --accent-orange: #FA7800;        /* DocsAura orange */

    /* Legacy aliases (so Ogarniamy patterns work unchanged) */
    --accent-blue: #6379EC;          /* soft accent, replaces Ogarniamy's #92A9EC */
    --light-blue: #DCE2F0;
    --accent-green: #00CA48;         /* kept for process-step accent */
    --accent-red: #FF4B59;

    --pure-white: #FFFFFF;
    --off-white: #F4F4F8;
    --ghost-white: #F8F8FB;
    --pure-black: #000000;
    --dark-purple: #0B0215;

    --ink-strong: rgba(0, 0, 0, 0.88);
    --ink-body: rgba(0, 0, 0, 0.64);
    --ink-muted: rgba(0, 0, 0, 0.48);
    --ink-subtle: rgba(0, 0, 0, 0.32);
    --on-dark-body: rgba(255, 255, 255, 0.82);
    --on-dark-muted: rgba(255, 255, 255, 0.64);

    /* ----- Gradients ----- */
    --gradient-start: #000000;
    --gradient-mid-1: #141EC8;
    --gradient-mid-2: #DC3CB4;
    --gradient-end: #FA7800;

    /* L0 Home — full DocsAura signature gradient: black → blue → magenta → orange */
    --gradient-hero: linear-gradient(135deg,
        var(--gradient-start) 0%,
        #0B0215 16%,
        var(--gradient-mid-1) 45%,
        var(--gradient-mid-2) 78%,
        var(--gradient-end) 100%);

    /* L1 Section pages (case-studies.html, about.html) — drops the deep black, softens. */
    --gradient-hero-l1: linear-gradient(135deg,
        #0B0215 0%,
        #141EC8 30%,
        #4A3CDC 55%,
        #DC3CB4 85%,
        #FA7800 100%);

    /* L2 Detail pages (case-studies/*) — anchors text-side dark, breathes to light. */
    --gradient-hero-l2: linear-gradient(135deg,
        #0B0215 0%,
        #141EC8 22%,
        #6E40DC 45%,
        #DC3CB4 70%,
        #FA9B40 90%,
        #FFE0C0 100%);

    --gradient-text-light: linear-gradient(180deg, #FFFFFF 0%, #DCE2F0 100%);
    --gradient-text-deep: linear-gradient(180deg, var(--primary-blue) 0%, var(--accent-magenta) 100%);

    --gradient-brand-band: linear-gradient(90deg, var(--primary-blue), var(--accent-magenta), var(--accent-orange));

    /* ----- Typography ----- */
    --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
    --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Variable-font axes for Fraunces (used on display headings) */
    --fraunces-display: "opsz" 144, "SOFT" 50, "WONK" 0;
    --fraunces-heading: "opsz" 72, "SOFT" 30, "WONK" 0;
    --fraunces-text: "opsz" 14, "SOFT" 20, "WONK" 0;

    /* Fluid type scale (mobile → desktop via clamp) */
    --fs-display-xl: clamp(2.5rem, 5.2vw, 4.5rem);
    --fs-display-lg: clamp(2.25rem, 4.2vw, 3.5rem);
    --fs-display-md: clamp(1.75rem, 3vw, 2.5rem);
    --fs-heading-lg: clamp(1.35rem, 2vw, 1.75rem);
    --fs-heading-md: clamp(1.15rem, 1.4vw, 1.35rem);
    --fs-body-lg: clamp(1rem, 1.05vw, 1.125rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.8125rem;
    --fs-eyebrow: 0.8125rem;

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-tight: -0.02em;
    --ls-tighter: -0.035em;
    --ls-eyebrow: 0.12em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ----- Spacing scale ----- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Fluid section padding */
    --section-pad-y: clamp(3rem, 5vw, 5rem);
    --section-pad-y-sm: clamp(2.25rem, 3.5vw, 3.5rem);

    /* ----- Radii ----- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-full: 9999px;

    /* ----- Shadows ----- */
    --shadow-sm: 0 2px 8px rgba(11, 2, 21, 0.05);
    --shadow-md: 0 8px 24px rgba(11, 2, 21, 0.08);
    --shadow-lg: 0 20px 48px rgba(11, 2, 21, 0.12);
    --shadow-xl: 0 32px 80px rgba(11, 2, 21, 0.16);
    --shadow-brand: 0 12px 40px rgba(20, 30, 200, 0.22);
    --shadow-glow: 0 0 0 1px rgba(20, 30, 200, 0.12), 0 20px 60px rgba(20, 30, 200, 0.18);

    /* ----- Container widths ----- */
    --container-narrow: 960px;
    --container: 1280px;
    --container-wide: 1440px;

    /* ----- Motion ----- */
    --transition-fast: 0.18s ease;
    --transition-base: 0.28s ease;
    --transition-slow: 0.45s ease;

    /* ----- Borders ----- */
    --border-hairline: 1px solid rgba(0, 0, 0, 0.08);
    --border-hairline-strong: 1px solid rgba(0, 0, 0, 0.16);
    --border-on-dark: 1px solid rgba(255, 255, 255, 0.18);

    /* ----- z-index ----- */
    --z-nav: 1000;
    --z-overlay: 1100;
}