/* ═══════════════════════════════════════════════════════════
   SCHOOLPROOFING DESIGN TOKENS
   Institutional Education Color Palette
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    /* ─────────────── Primary Colors ─────────────── */
    /* Deep Navy - Trust, Institution, Stability */
    --sp-navy: #1e3a5f;
    --sp-navy-dark: #152b47;
    --sp-navy-light: #2d4a6f;
    --sp-navy-lighter: #e8eef4;
    /* Forest Green - Growth, Learning, Natural */
    --sp-forest: #2d6a4f;
    --sp-forest-dark: #1b4332;
    --sp-forest-light: #40916c;
    --sp-forest-lighter: #d8f3dc;
    /* Warm Gold - Achievement, Excellence */
    --sp-gold: #d4a84b;
    --sp-gold-dark: #b8922f;
    --sp-gold-light: #e6c96e;
    --sp-gold-lighter: #fef7e0;
    /* Dark slate for code-block backgrounds (Api docs, ApiKeys, Webhooks). */
    --sp-code-bg: #1e3a5f;
    /* ─────────────── White-Label Brand Tokens (S44) ───────────────
       Tenant-skinnable brand layer. By default these alias the
       institutional palette above so unconfigured tenants render
       identically to pre-S44. _BrandingStyle.cshtml overrides these
       four tokens on :root when a tenant has custom branding via
       ITenantBrandingService. Marketing pages never load the
       override partial — they always see the defaults below. */
    --sp-brand-primary: var(--sp-navy);
    --sp-brand-primary-dark: var(--sp-navy-dark);
    --sp-brand-accent: var(--sp-gold);
    --sp-brand-logo-url: url('/images/logo.png');
    /* ─────────────── Semantic Colors ─────────────── */
    --sp-success: #059669;
    --sp-success-dark: #047857;
    --sp-success-light: #d1fae5;
    --sp-success-text: #065f46;
    --sp-info: #0d9488;
    --sp-info-dark: #0f766e;
    --sp-info-light: #ccfbf1;
    --sp-info-text: #134e4a;
    --sp-warning: #d97706;
    --sp-warning-dark: #b45309;
    --sp-warning-light: #fef3c7;
    --sp-warning-text: #92400e;
    --sp-danger: #dc2626;
    --sp-danger-dark: #b91c1c;
    --sp-danger-light: #fee2e2;
    --sp-danger-text: #991b1b;
    /* ─────────────── Neutral Colors ─────────────── */
    --sp-white: #ffffff;
    --sp-gray-50: #f9fafb;
    --sp-gray-100: #f3f4f6;
    --sp-gray-200: #e5e7eb;
    --sp-gray-300: #d1d5db;
    --sp-gray-400: #9ca3af;
    --sp-gray-500: #6b7280;
    --sp-gray-600: #4b5563;
    --sp-gray-700: #374151;
    --sp-gray-800: #1f2937;
    --sp-gray-900: #111827;
    /* ─────────────── Text Colors ─────────────── */
    --sp-text-primary: #1f2937;
    --sp-text-secondary: #4b5563;
    --sp-text-tertiary: #6b7280;
    --sp-text-muted: #9ca3af;
    --sp-text-inverse: #ffffff;
    /* ─────────────── Background Colors ─────────────── */
    --sp-bg-primary: #ffffff;
    --sp-bg-secondary: #f9fafb;
    --sp-bg-tertiary: #f3f4f6;
    --sp-bg-dark: #1f2937;
    /* ─────────────── Border Colors ─────────────── */
    --sp-border: #e5e7eb;
    --sp-border-light: #f3f4f6;
    --sp-border-dark: #d1d5db;
    /* ─────────────── Typography ─────────────── */
    --sp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sp-font-display: 'Nunito', var(--sp-font-sans);
    --sp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --sp-text-xs: 0.75rem;
    --sp-text-sm: 0.875rem;
    --sp-text-base: 1rem;
    --sp-text-lg: 1.125rem;
    --sp-text-xl: 1.25rem;
    --sp-text-2xl: 1.5rem;
    --sp-text-3xl: 1.875rem;
    --sp-text-4xl: 2.25rem;
    --sp-font-normal: 400;
    --sp-font-medium: 500;
    --sp-font-semibold: 600;
    --sp-font-bold: 700;
    --sp-leading-tight: 1.25;
    --sp-leading-normal: 1.5;
    --sp-leading-relaxed: 1.625;
    /* ─────────────── Spacing ─────────────── */
    --sp-space-1: 0.25rem;
    --sp-space-2: 0.5rem;
    --sp-space-3: 0.75rem;
    --sp-space-4: 1rem;
    --sp-space-5: 1.25rem;
    --sp-space-6: 1.5rem;
    --sp-space-8: 2rem;
    --sp-space-10: 2.5rem;
    --sp-space-12: 3rem;
    --sp-space-16: 4rem;
    /* ─────────────── Border Radius ─────────────── */
    --sp-radius-sm: 4px;
    --sp-radius: 6px;
    --sp-radius-md: 8px;
    --sp-radius-lg: 12px;
    --sp-radius-xl: 16px;
    --sp-radius-full: 9999px;
    /* ─────────────── Shadows ─────────────── */
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --sp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --sp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --sp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    /* ─────────────── Transitions ─────────────── */
    --sp-transition-fast: 150ms ease;
    --sp-transition: 200ms ease;
    --sp-transition-slow: 300ms ease;
    /* ─────────────── Z-Index ─────────────── */
    --sp-z-dropdown: 100;
    --sp-z-sticky: 200;
    --sp-z-fixed: 300;
    --sp-z-modal-backdrop: 400;
    --sp-z-modal: 500;
    --sp-z-tooltip: 600;
    /* ─────────────── Container Widths ─────────────── */
    --sp-container-sm: 640px;
    --sp-container-md: 768px;
    --sp-container-lg: 1024px;
    --sp-container-xl: 1280px;
    --sp-container-2xl: 1400px;
    /* ─────────────── Touch Targets (Accessibility) ─────────────── */
    --sp-touch-min: 44px;
    --sp-touch-lg: 48px;
    --sp-touch-student-primary: 60px;
    --sp-touch-student-secondary: 44px;
    /* ─────────────── Student Shell ───────────────
       Warmer, higher-saturation palette for the student-facing app
       (used by _StudentLayout, _Fynn partial, and student-shell.css).
       The shell is visually distinct from the parent dashboard — see
       Block 5 brief. */
    --sp-student-bg: #FFF9F1;        /* warm cream — the canvas */
    --sp-student-bg-elevated: #FFFFFF;
    --sp-student-text: #2D2A26;       /* warm dark brown, not pure black */
    --sp-student-text-soft: #5C534B;
    --sp-student-accent: #6B4423;     /* satchel saddle brown — also the icon-mode mark */
    --sp-student-warm: #FFE8C8;       /* warm sand for surfaces */
    --sp-fynn-orange: #E87A3F;       /* Fynn body */
    --sp-fynn-orange-dark: #d56a2f;  /* S63 — hover state; was hardcoded in marketing.css before today */
    --sp-fynn-cream: #FFF4E6;        /* Fynn belly / accents */
    --sp-fynn-dark: #2D2A26;         /* Fynn outline + eyes */
    /* S38 — standardised tokens that commissioned SVGs reference via
       fill="var(--sp-fynn-primary)" etc. so the same SVG recolors
       cleanly across light, dark, and brand-coloured backgrounds.
       Defaults alias to the existing palette above. */
    --sp-fynn-primary:   var(--sp-fynn-orange);
    --sp-fynn-secondary: var(--sp-fynn-cream);
    --sp-fynn-accent:    #6B4423;    /* satchel saddle brown — supplemental warm accent */
    --sp-fynn-outline:   var(--sp-fynn-dark);
    --sp-satchel-brown: #6B4423;
    --sp-student-font: 'Quicksand', system-ui, -apple-system, sans-serif;
    --sp-student-text-base: 18px;     /* mobile-first base size */
    --sp-student-text-desktop: 16px;
    --sp-student-leading: 1.6;
    --sp-student-leading-tight: 1.3;
    /* ─────────────── Homepage Polish (S61) ───────────────
       Scoped to /Pages/Index.cshtml — referenced only by
       homepage.css. Brighter subject-tag variants for the
       hero preview card so the chips pop as vivid proof
       against the white window background; the muted global
       tag tokens (--sp-gold-lighter etc.) still apply to the
       rest of the site. Hero typography polish tokens give
       the H1 a confident "premium dark-card" leading and
       tracking without affecting other display headings. */
    /* S63 — Reading tag flipped from gold amber (#FCE7A1 /
       #7A5500) to orange-cream tones so the chip joins the new
       marketing-orange palette. Science (green) and Math (blue)
       kept distinct as positive proof colors. */
    --sp-home-tag-reading-bg: #FFE1C8;
    --sp-home-tag-reading-fg: #B05A20;
    --sp-home-tag-science-bg: #B7EBC9;
    --sp-home-tag-science-fg: #195C36;
    --sp-home-tag-math-bg: #C7DFFE;
    --sp-home-tag-math-fg: #1E3A8A;
    --sp-home-leading-hero: 1.1;
    --sp-home-tracking-hero: -0.02em;
    /* S62 — warm cream for section background alternation
       (How It Works + One Journal). Replaces the gray-50
       --sp-bg-secondary fill on .sp-home-section--tinted so
       the homepage reads as warm/white/warm rhythm rather
       than cool gray. Subtle by design — calmer than #fdf2dd,
       warmer than #fafafa. Consumed only by homepage.css. */
    --sp-home-bg-section-warm: #fdf6ed;
}