/* ========================================================
   MAISHA YANGU ORGANIZATION — DESIGN SYSTEM VARIABLES
   Matched exactly to myodesign.lovable.app colour palette
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ─── BREAKPOINTS (single source of truth) ──────────────── */
:root {
  --bp-lg: 1024px;   /* Large desktop */
  --bp-md: 960px;    /* Tablet landscape / small laptop */
  --bp-sm: 768px;    /* Tablet portrait */
  --bp-xs: 640px;    /* Large phone */
  --bp-2xs: 480px;   /* Small phone */
}

/* ─── LIGHT THEME (default) ─────────────────────────────── */
:root {
  /* Core palette — from myodesign.lovable.app */
  --bg:           oklch(100% 0 0);
  --bg-alt:       oklch(96.1% 0 89.9);
  --surface:      oklch(100% 0 0);
  --surface-2:    oklch(96.1% 0 89.9);

  --border:       oklch(90% .012 265);
  --border-focus: oklch(29.8% .195 264.9);

  --fg:           oklch(22% .03 265);
  --fg-2:         oklch(52% .03 265);
  --muted:        oklch(52% .03 265);
  --muted-light:  oklch(96.1% 0 89.9);

  /* Primary navy/purple */
  --primary:            oklch(29.8% .195 264.9);
  --primary-hover:      oklch(26% .168 264.9);
  --primary-dark:       oklch(26% .168 264.9); /* alias used by templates */
  --primary-foreground: oklch(99% .002 265);
  --primary-subtle:     oklch(96.1% 0 89.9);
  --primary-muted:      oklch(90% .012 265);

  /* Accent — warm gold/yellow */
  --accent:             oklch(75.4% .158 65);
  --accent-hover:       oklch(72.5% .165 55.7);
  --accent-foreground:  oklch(24% .06 60);
  --accent-subtle:      oklch(96.1% 0 89.9);
  --accent-muted:       oklch(85% .06 65); /* subtle accent border/hairline */

  /* Semantic feedback */
  --success:        oklch(57% .18 150); /* A generic green */
  --success-subtle: oklch(95% .05 150);
  --success-muted:  oklch(85% .08 150);
  --warning:        oklch(75.4% .158 65);
  --warning-subtle: oklch(97% .04 65);
  --warning-muted:  oklch(90% .07 65);
  --danger:         oklch(57.7% .245 27.325);
  --danger-subtle:  oklch(95% .06 27.325);
  --danger-muted:   oklch(88% .1 27.325);
  --info:           oklch(65% .15 240); /* A generic blue */
  --info-subtle:    oklch(95% .04 240);
  --info-muted:     oklch(88% .07 240);

  /* Typography — exact fonts from site */
  --font-sans:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif; /* display face for hero numerals/quotes */

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);

  /* Radii */
  --r-sm: 0.5rem;  /* 8px */
  --r-md: 0.75rem; /* 12px */
  --r-lg: 1rem;    /* 16px */
  --r-xl: 1.5rem;  /* 24px */
  --r-full: 9999px;

  /* Transitions */
  --t-fast:   all 0.15s ease;
  --t-normal: all 0.25s ease;
  --t-slow:   all 0.4s ease;

  /* ─── Gradients ─────────────────────────────────────────────
     Shared linear-gradient recipes so every surface (buttons, cards,
     section bands, hero tints) is drawn from one palette. Both themes
     define the same token names, so components never need a theme
     branch of their own. */
  --gradient-primary:  linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 52%, oklch(36% .18 270) 100%);
  --gradient-accent:   linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 55%, oklch(80% .14 72) 100%);
  --gradient-brand:    linear-gradient(135deg, oklch(29.8% .195 264.9 / .95) 0%, oklch(29.8% .195 264.9 / .72) 55%, oklch(29.8% .195 264.9 / .35) 100%);
  /* Page bands + cards (kept subtle so text contrast never changes) */
  --gradient-surface:  linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 55%, var(--bg-alt) 100%);
  --gradient-card:     linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 130%);
  /* Hero bands: brand navy sweeping into a warm accent corner */
  --gradient-hero:     linear-gradient(125deg, oklch(29.8% .195 264.9 / .95) 0%, oklch(26% .168 264.9 / .82) 45%, oklch(75.4% .158 65 / .40) 100%);
  /* Navbar underline: accent-to-primary sweep, legible on the header in both modes */
  --gradient-underline:      linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  --gradient-underline-dark: linear-gradient(90deg, var(--accent) 0%, oklch(72% .18 268) 100%);
  /* Sheen swept across buttons on hover / first paint */
  --gradient-sheen:    linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .34) 50%, transparent 68%);
  /* Gradient text (statistic numbers) */
  --gradient-text:     linear-gradient(100deg, var(--primary) 0%, oklch(45% .19 268) 60%, oklch(58% .16 60) 100%);

  /* ─── Motion tokens (entrance animations) ─────────────────── */
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --t-enter:       0.7s;
  --enter-shift:   1.25rem;

  /* ─── Type scale ────────────────────────────────────────────
     Single source of truth for text size + line-height. Pair with the
     font-weight utilities in components/type.css (.fw-*) to change
     emphasis without touching these sizes. */
  --text-display: clamp(2.5rem, 5.2vw, 3.75rem);  /* page-title display */
  --text-h1:      clamp(2rem, 4.5vw, 3.25rem);
  --text-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --text-h2-lg:   1.75rem;    /* 28px — pillar intro / feature display titles */
  --text-h3-lg:   1.5rem;     /* 24px — sub-section / feature headings */
  --text-h3:      1.375rem;   /* 22px — card & item headings */
  --text-title:   1.25rem;    /* 20px — card & panel titles */
  --text-h4:      1.125rem;   /* 18px */
  --text-lead:    1.125rem;   /* 18px — intro / stand-first paragraphs */
  --text-body:    1rem;       /* 16px — default body copy */
  --text-small:   0.875rem;   /* 14px — meta, labels, captions */
  --text-xs:      0.8125rem;  /* 13px — microcopy, chips, table notes */
  --text-2xs:     0.75rem;    /* 12px — badges, eyebrows, captions */
  --text-section: clamp(1.75rem, 3vw, 2.5rem); /* section band titles */
  --text-hero:    clamp(2.25rem, 5vw, 3.5rem); /* hero banner titles */

  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-body:     1.65;
  --leading-relaxed:  1.8;
  --tracking-tight:  -0.02em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.12em;

  /* Layout */
  --max-w: 1200px;
  --header-h: 64px; /* Updated to match the actual desktop navbar height */
  --header-h-mobile: 60px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 7rem;
}

/* ─── DARK THEME ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           oklch(18% .03 265); /* Slightly darker background for more contrast */
  --bg-alt:       oklch(24% .04 265);
  --surface:      oklch(22% .03 265);
  --surface-2:    oklch(26% .05 265);

  --border:       oklch(30% .03 265);
  --border-focus: oklch(75.4% .158 65);

  --fg:           oklch(96.1% 0 89.9);
  --fg-2:         oklch(70% .02 265);
  --muted:        oklch(60% .02 265);
  --muted-light:  oklch(45% .02 265);

  --primary:            oklch(60% .25 264.9); /* Lighter, more vibrant primary for dark theme */
  --primary-hover:      oklch(35% .195 264.9);
  --primary-dark:       oklch(30% .15 264.9);
  --primary-foreground: oklch(99% .002 265);
  --primary-subtle:     oklch(24% .04 265);
  --primary-muted:      oklch(30% .03 265);

  --accent:             oklch(75.4% .158 65);
  --accent-hover:       oklch(72.5% .165 55.7);
  --accent-foreground:  oklch(24% .06 60);
  --accent-subtle:      oklch(24% .04 65);
  --accent-muted:       oklch(45% .09 65); /* subtle accent border/hairline */

  --success-subtle: oklch(25% .05 150);
  --success-muted:  oklch(30% .08 150);
  --warning-subtle: oklch(25% .04 65);
  --warning-muted:  oklch(30% .07 65);
  --danger-subtle:  oklch(25% .06 27.325);
  --danger-muted:   oklch(30% .1 27.325);
  --info-subtle:    oklch(25% .04 240);
  --info-muted:     oklch(30% .07 240);

  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);

  /* Gradients */
  /* --gradient-surface / --gradient-card / --gradient-accent intentionally
     keep their :root recipes: they are built from palette tokens that already
     flip per theme. Only the mixes that would break contrast are overridden. */
  --gradient-primary: linear-gradient(135deg, oklch(30% .15 264.9) 0%, oklch(38% .20 266) 52%, oklch(44% .22 270) 100%);
  --gradient-hero:    linear-gradient(125deg, oklch(20% .05 265 / .96) 0%, oklch(27% .11 268 / .88) 45%, oklch(75.4% .158 65 / .30) 100%);
  --gradient-sheen:   linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .22) 50%, transparent 68%);
  --gradient-text:    linear-gradient(100deg, var(--fg) 0%, oklch(72% .18 268) 55%, var(--accent) 100%);
  --gradient-brand: linear-gradient(135deg, oklch(26% .168 264.9 / .94), oklch(29.8% .195 264.9 / .72) 55%, oklch(29.8% .195 264.9 / .35));
}