/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║   Eidolon — landing-page design tokens                                   ║
   ║   shared/frontend/landing/css/tokens.css                                 ║
   ║                                                                          ║
   ║   Every product's landing page imports this first. Theme primary +      ║
   ║   accent are CSS custom properties — products override via their own    ║
   ║   `landing.css` (loaded after this file). Default theme below is         ║
   ║   neutral-blue, used by the platform landing at /.                       ║
   ║                                                                          ║
   ║   Per-product override pattern:                                          ║
   ║       :root {                                                            ║
   ║           --theme-primary:       #256d47;   (Nursery green)              ║
   ║           --theme-primary-dark:  #1f4d35;                                ║
   ║           --theme-primary-light: #f2faf5;                                ║
   ║           --theme-accent:        #e8695e;   (warm coral)                 ║
   ║       }                                                                  ║
   ║                                                                          ║
   ║   All primaries are WCAG-AA against white (≥4.5:1 for body, ≥3:1 for   ║
   ║   large text and UI components).                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400&display=swap');

:root {
    /* ── Theme (overridable by per-product landing.css) ───────────────── */
    --theme-primary:        #1e40af;   /* default = Slate-blue (platform/Clinic baseline) */
    --theme-primary-dark:   #1e3a8a;
    --theme-primary-darker: #172554;
    --theme-primary-light:  #eff6ff;
    --theme-primary-tint:   #dbeafe;
    --theme-accent:         #e8695e;   /* warm coral — works on every theme */
    --theme-accent-dark:    #d95550;

    /* ── Neutral system (fixed across themes) ─────────────────────────── */
    --neutral-cream:        #faf8f4;
    --neutral-cream-dark:   #f0ece4;
    --neutral-white:        #ffffff;
    --neutral-text-dark:    #1a2333;
    --neutral-text-body:    #3d4756;
    --neutral-text-muted:   #6b7585;
    --neutral-text-light:   #a8b0bd;
    --neutral-border:       #d6dae0;
    --neutral-border-light: #e8ebef;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono:    'SFMono-Regular', Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.85rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.5rem;
    --fs-4xl:  3.25rem;

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;

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

    /* ── Spacing scale (multiplier-based for vertical rhythm) ─────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6.5rem;

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill: 999px;

    /* ── Shadows (theme-tinted via primary-darker fade) ───────────────── */
    --shadow-sm:  0 1px 3px rgba(26, 35, 51, 0.06);
    --shadow-md:  0 4px 12px rgba(26, 35, 51, 0.08);
    --shadow-lg:  0 12px 32px rgba(26, 35, 51, 0.10);
    --shadow-xl:  0 20px 50px rgba(26, 35, 51, 0.12);

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container-max:    1140px;
    --container-narrow: 720px;
    --container-padding: var(--space-lg);
    --navbar-height:    72px;
    --navbar-height-sm: 64px;

    /* ── Breakpoints (for use in calc and helpers; @media values stay literal) ── */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* ── Motion ────────────────────────────────────────────────────────── */
    --motion-fast:   120ms;
    --motion-base:   220ms;
    --motion-slow:   400ms;
    --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index scale ─────────────────────────────────────────────────── */
    --z-base:    0;
    --z-card:    10;
    --z-sticky:  100;
    --z-overlay: 800;
    --z-drawer:  900;
    --z-navbar:  1000;
    --z-modal:   1100;
}


/* ────────────────────────────────────────────────────────────────────────────
   Per-theme classes — opt-in for products that prefer body-class theming over
   per-product landing.css overrides. Default product CSS sets these via :root
   in their own file; the body-class versions are here as a fallback option.
   ──────────────────────────────────────────────────────────────────────────── */
.theme-nursery {
    --theme-primary:        #256d47;
    --theme-primary-dark:   #1f4d35;
    --theme-primary-darker: #1a3a2a;
    --theme-primary-light:  #f2faf5;
    --theme-primary-tint:   #e8f5ed;
    --theme-accent:         #e8695e;
}
.theme-personal {
    --theme-primary:        #4338ca;       /* indigo */
    --theme-primary-dark:   #3730a3;
    --theme-primary-darker: #312e81;
    --theme-primary-light:  #eef2ff;
    --theme-primary-tint:   #e0e7ff;
    --theme-accent:         #f59e0b;       /* amber accent */
}
.theme-research {
    --theme-primary:        #0e7490;       /* teal */
    --theme-primary-dark:   #155e75;
    --theme-primary-darker: #164e63;
    --theme-primary-light:  #ecfeff;
    --theme-primary-tint:   #cffafe;
    --theme-accent:         #f97316;       /* orange */
}
.theme-clinic {
    --theme-primary:        #1e40af;       /* slate-blue (default — restated for clarity) */
    --theme-primary-dark:   #1e3a8a;
    --theme-primary-darker: #172554;
    --theme-primary-light:  #eff6ff;
    --theme-primary-tint:   #dbeafe;
    --theme-accent:         #ef4444;       /* clinical red */
}
.theme-care {
    --theme-primary:        #be185d;       /* warm rose */
    --theme-primary-dark:   #9d174d;
    --theme-primary-darker: #831843;
    --theme-primary-light:  #fdf2f8;
    --theme-primary-tint:   #fce7f3;
    --theme-accent:         #0e7490;       /* teal counterpoint */
}
.theme-abs {
    --theme-primary:        #b45309;       /* amber */
    --theme-primary-dark:   #92400e;
    --theme-primary-darker: #78350f;
    --theme-primary-light:  #fffbeb;
    --theme-primary-tint:   #fef3c7;
    --theme-accent:         #1e40af;       /* trust-blue accent */
}
.theme-clean {
    --theme-primary:        #7c3aed;       /* purple */
    --theme-primary-dark:   #6d28d9;
    --theme-primary-darker: #5b21b6;
    --theme-primary-light:  #faf5ff;
    --theme-primary-tint:   #ede9fe;
    --theme-accent:         #06b6d4;       /* cyan */
}
.theme-industry {
    --theme-primary:        #475569;       /* slate */
    --theme-primary-dark:   #334155;
    --theme-primary-darker: #1e293b;
    --theme-primary-light:  #f8fafc;
    --theme-primary-tint:   #e2e8f0;
    --theme-accent:         #f59e0b;       /* amber */
}
.theme-primary {
    --theme-primary:        #a16207;       /* mustard */
    --theme-primary-dark:   #854d0e;
    --theme-primary-darker: #713f12;
    --theme-primary-light:  #fefce8;
    --theme-primary-tint:   #fef9c3;
    --theme-accent:         #16a34a;       /* growth-green */
}
.theme-secondary {
    --theme-primary:        #0369a1;       /* deep cyan-blue */
    --theme-primary-dark:   #075985;
    --theme-primary-darker: #0c4a6e;
    --theme-primary-light:  #f0f9ff;
    --theme-primary-tint:   #e0f2fe;
    --theme-accent:         #f97316;
}
.theme-university {
    --theme-primary:        #6b21a8;       /* plum */
    --theme-primary-dark:   #581c87;
    --theme-primary-darker: #3b0764;
    --theme-primary-light:  #faf5ff;
    --theme-primary-tint:   #f3e8ff;
    --theme-accent:         #fbbf24;       /* gold */
}