/* ============================================================
   CULTIVATE K-12 — Design Tokens
   Brand palette: Navy #1A3563, Orange #E8601A, Green #3A7D44, Teal #1B8A9A
   Refined for premium educational consulting brand
   ============================================================ */

:root,
[data-theme='light'] {
  /* ── Type Scale ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    7.5rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Brand Colors ── */
  /* Navy — authority, trust, education */
  --brand-navy:       #1A3563;
  --brand-navy-dark:  #0F2040;
  --brand-navy-light: #2A4A7F;

  /* Orange — energy, warmth, action */
  --brand-orange:       #E8601A;
  --brand-orange-dark:  #C44E0E;
  --brand-orange-light: #F07234;

  /* Green — growth, hope, community */
  --brand-green:       #3A7D44;
  --brand-green-dark:  #2A5E32;
  --brand-green-light: #4A9556;

  /* Teal — innovation, STEM, forward-thinking */
  --brand-teal:       #1B8A9A;
  --brand-teal-dark:  #146B78;
  --brand-teal-light: #24A3B5;

  /* ── Surface / BG (Light Mode — warm cream with navy undertone) ── */
  --color-bg:              #F8F7F4;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F3F1ED;
  --color-surface-offset:  #EAE8E2;
  --color-divider:         #DCD9D2;
  --color-border:          #D0CCC4;

  /* ── Text ── */
  --color-text:         #1A1814;
  --color-text-muted:   #5A5750;
  --color-text-faint:   #9A9690;
  --color-text-inverse: #F8F7F4;

  /* ── Primary / Accent ── */
  --color-primary:           var(--brand-navy);
  --color-primary-hover:     var(--brand-navy-dark);
  --color-primary-active:    #0A1830;
  --color-primary-highlight: #D0D9E8;

  --color-accent:           var(--brand-orange);
  --color-accent-hover:     var(--brand-orange-dark);
  --color-accent-highlight: #FDEEE5;

  --color-success:      var(--brand-green);
  --color-teal:         var(--brand-teal);

  /* ── Radii ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 24, 20, 0.08), 0 2px 4px rgba(26, 24, 20, 0.04);
  --shadow-lg: 0 12px 40px rgba(26, 24, 20, 0.12), 0 4px 8px rgba(26, 24, 20, 0.06);
  --shadow-xl: 0 24px 64px rgba(26, 24, 20, 0.16);

  /* ── Transitions ── */
  --transition-fast:        120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth:      400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Content Widths ── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-full:    100%;

  /* ── Fonts ── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-sans:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
}

/* ── DARK MODE ── */
[data-theme='dark'] {
  --color-bg:              #111210;
  --color-surface:         #181715;
  --color-surface-2:       #1E1D1B;
  --color-surface-offset:  #242321;
  --color-divider:         #2E2C2A;
  --color-border:          #3A3835;

  --color-text:         #E8E5DF;
  --color-text-muted:   #8A8782;
  --color-text-faint:   #5A5750;
  --color-text-inverse: #111210;

  --color-primary:           #4A78B8;
  --color-primary-hover:     #5A8ACC;
  --color-primary-active:    #6A9AE0;
  --color-primary-highlight: #1E2A3D;

  --color-accent:           #F07234;
  --color-accent-hover:     #FF8248;
  --color-accent-highlight: #3A2010;

  --color-success:      #5A9E65;
  --color-teal:         #2AABB8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #111210;
    --color-surface:         #181715;
    --color-surface-2:       #1E1D1B;
    --color-surface-offset:  #242321;
    --color-divider:         #2E2C2A;
    --color-border:          #3A3835;
    --color-text:         #E8E5DF;
    --color-text-muted:   #8A8782;
    --color-text-faint:   #5A5750;
    --color-text-inverse: #111210;
    --color-primary:           #4A78B8;
    --color-primary-hover:     #5A8ACC;
    --color-primary-active:    #6A9AE0;
    --color-primary-highlight: #1E2A3D;
    --color-accent:           #F07234;
    --color-accent-hover:     #FF8248;
    --color-accent-highlight: #3A2010;
    --color-success:      #5A9E65;
    --color-teal:         #2AABB8;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}