/* ============================================
   DESIGN TOKENS — CompanyAura.
   Light, editorial system shared with the DocsAura
   landing family (see DESIGN.md). Every page loads
   this first; nothing else defines colors, type,
   spacing, radii, or shadows.
   ============================================ */

:root {
    /* ----- Brand color ----- */
    --white: #ffffff;
    --main-accent: #141EC8;
    --main-accent-light: #2A34E0;
    --main-accent-dark: #0E15A0;
    --main-accent-glow: rgba(20, 30, 200, 0.4);
    --complementary-1: #DC3CB4;   /* magenta — kickers, small accents */
    --complementary-2: #FA7800;   /* orange — tags inside dark panels */

    /* ----- Neutrals ----- */
    --gray-50:  #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --gray-950: #0a0a0a;

    /* ----- Semantic surfaces & text ----- */
    --surface-page: var(--white);
    --surface-sunken: var(--gray-50);
    --surface-soft-tint: #F5F3FF;
    --fg-1: var(--gray-950);
    --fg-2: var(--gray-700);
    --fg-3: var(--gray-500);
    --fg-brand: var(--main-accent);
    --border-subtle: var(--gray-200);
    --border-default: var(--gray-300);

    /* ----- The aura (brand signature) ----- */
    --aura-gradient:
        radial-gradient(ellipse 55% 65% at 78% 58%, #E73CB0 0%, transparent 55%),
        radial-gradient(ellipse 30% 40% at 98% 5%, #F25A2C 0%, transparent 55%),
        radial-gradient(ellipse 45% 50% at 55% 110%, #F79CDC 0%, transparent 55%),
        linear-gradient(115deg, #0A0A3E 0%, #1420E0 35%, #6428D8 65%, #C62CA0 90%);
    --aura-corner-wash:
        radial-gradient(circle at 100% 100%, rgba(220,60,180,0.10), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(20,30,200,0.05), transparent 40%);

    /* ----- Typography ----- */
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-serif-italic: 'Instrument Serif', 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --fs-h1: clamp(2.25rem, 5vw, 4rem);          /* 36 → 64 */
    --fs-title: clamp(1.75rem, 3.6vw, 2.75rem);  /* 28 → 44 */
    --fs-title-sm: clamp(1.5rem, 3vw, 2.25rem);  /* 24 → 36 */
    --fs-lead: clamp(1.0625rem, 1.6vw, 1.25rem); /* 17 → 20 */
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.8125rem;
    --fs-micro: 0.75rem;

    /* ----- Radii ----- */
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* ----- Shadows ----- */
    --shadow-sm: 0 2px 6px rgba(10,10,10,0.05), 0 1px 2px rgba(10,10,10,0.04);
    --shadow-md: 0 8px 24px rgba(10,10,10,0.06), 0 2px 6px rgba(10,10,10,0.04);
    --shadow-lg: 0 20px 48px rgba(10,10,10,0.10), 0 4px 12px rgba(10,10,10,0.05);
    --shadow-brand-glow: 0 12px 40px var(--main-accent-glow);

    /* ----- Layout ----- */
    --container: 1200px;
    --container-narrow: 880px;
    --section-pad-y: clamp(4rem, 7vw, 6.5rem);
    --section-pad-y-sm: clamp(2.5rem, 4.5vw, 4rem);

    /* ----- Motion ----- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

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

    /* ============================================
       LEGACY ALIASES — temporary bridge while pages
       migrate to the new tokens. Delete once
       `grep -rn "primary-blue\|ghost-white\|ink-body\|font-serif\b" public/`
       only matches this block.
       ============================================ */
    --primary-purple: var(--gray-950);
    --primary-blue: var(--main-accent);
    --primary-blue-light: var(--main-accent-light);
    --accent-magenta: var(--complementary-1);
    --accent-orange: var(--complementary-2);
    --accent-blue: var(--main-accent-light);
    --light-blue: var(--surface-soft-tint);
    --accent-green: #00CA48;
    --accent-red: #FF4B59;
    --pure-white: var(--white);
    --off-white: var(--gray-100);
    --ghost-white: var(--gray-50);
    --pure-black: var(--gray-950);
    --dark-purple: var(--gray-950);
    --ink-strong: var(--fg-1);
    --ink-body: var(--fg-2);
    --ink-muted: var(--fg-3);
    --ink-subtle: var(--gray-400);
    --on-dark-body: rgba(255, 255, 255, 0.82);
    --on-dark-muted: rgba(255, 255, 255, 0.64);
    --gradient-hero: var(--aura-gradient);
    --gradient-hero-l1: var(--aura-gradient);
    --gradient-hero-l2: var(--aura-gradient);
    --gradient-text-light: linear-gradient(180deg, #FFFFFF 0%, #DCE2F0 100%);
    --gradient-text-deep: linear-gradient(180deg, var(--main-accent) 0%, var(--complementary-1) 100%);
    --gradient-brand-band: linear-gradient(90deg, var(--main-accent), var(--complementary-1), var(--complementary-2));
    --font-serif: var(--font-display);
    --fraunces-display: "opsz" 144;
    --fraunces-heading: "opsz" 72;
    --fraunces-text: "opsz" 14;
    --fs-display-xl: var(--fs-h1);
    --fs-display-lg: clamp(2rem, 4.2vw, 3.25rem);
    --fs-display-md: var(--fs-title);
    --fs-heading-lg: clamp(1.35rem, 2vw, 1.75rem);
    --fs-heading-md: clamp(1.15rem, 1.4vw, 1.35rem);
    --fs-body-lg: var(--fs-lead);
    --fs-eyebrow: var(--fs-caption);
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;
    --ls-tight: -0.02em;
    --ls-tighter: -0.03em;
    --ls-eyebrow: 0.08em;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --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;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-full: var(--radius-pill);
    --shadow-xl: var(--shadow-lg);
    --shadow-brand: var(--shadow-brand-glow);
    --shadow-glow: 0 0 0 1px rgba(20, 30, 200, 0.12), 0 20px 60px rgba(20, 30, 200, 0.18);
    --container-wide: 1280px;
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --border-hairline: 1px solid var(--border-subtle);
    --border-hairline-strong: 1px solid var(--border-default);
    --border-on-dark: 1px solid rgba(255, 255, 255, 0.18);
}