/* ============================================================================
   Sukulu Design System 2.0 — shared token + base-component layer
   Spec: docs/SUKULU-DESIGN-SYSTEM-2.md · Gap analysis: docs/SUKULU-DESIGN-SYSTEM-2-GAP-ANALYSIS.md
   Brand (RESOLVED 2026-10-04): HYBRID — navy-gold editorial shell + violet→coral
   reserved for brand/logo/AI/primary-CTA/selected states only (never decoration).

   USAGE: add to a page head:  <link rel="stylesheet" href="/sukulu-design.css">
          + the fonts:         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap">
   All classes/tokens are prefixed `sk-` so this layer is ADDITIVE — it never
   overrides a page's existing styles until that page opts in by using sk- names.
   Breakpoints (use in page media queries): 360 / 390 / 768 / 1024 / 1280 / 1440.
   ============================================================================ */

:root {
  /* ---- Brand & shell ---- */
  --sk-navy: #0E1330;           /* primary shell / ink */
  --sk-navy-2: #1A2040;
  --sk-navy-3: #232A52;
  --sk-navy-line: rgba(255,255,255,.09);
  --sk-violet: #6D28D9;         /* brand accent */
  --sk-violet-dark: #4C1D95;
  --sk-coral: #F9603A;          /* brand accent */
  --sk-coral-dark: #D94827;
  --sk-gradient: linear-gradient(135deg, #6D28D9 0%, #F9603A 100%);  /* the ONE canonical gradient */

  /* ---- Neutrals (cool, grounded in the communities page) ---- */
  --sk-ink: #0E1330;            /* primary text */
  --sk-ink-2: #3A4060;          /* secondary text */
  --sk-muted: #5A6075;          /* meta / muted */
  --sk-faint: #96919D;          /* placeholder / disabled text */
  --sk-bg: #F2F3F7;             /* page ground */
  --sk-surface: #FFFFFF;        /* cards / panels */
  --sk-surface-2: #EDEFF5;      /* subtle fill */
  --sk-line: #E4E6EE;           /* default border */
  --sk-line-soft: rgba(14,19,48,.10);

  /* ---- Semantic (never reuse brand violet for state) ---- */
  --sk-success: #166534; --sk-success-soft: rgba(22,101,52,.10);
  --sk-warning: #92400E; --sk-warning-soft: rgba(146,64,14,.10);
  --sk-danger:  #B91C1C; --sk-danger-soft:  rgba(185,28,28,.10);
  --sk-info:    #1D4ED8; --sk-info-soft:    rgba(29,78,216,.10);

  /* ---- Typography ---- */
  --sk-font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --sk-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-text-xs: 0.75rem;  --sk-text-sm: 0.875rem; --sk-text-base: 1rem;
  --sk-text-lg: 1.125rem; --sk-text-xl: 1.25rem;  --sk-text-2xl: 1.5rem;
  --sk-text-3xl: 1.875rem;--sk-text-4xl: 2.25rem; --sk-text-5xl: 3rem;
  --sk-text-6xl: 3.75rem; --sk-text-7xl: 4.5rem;

  /* ---- Spacing (8px system) ---- */
  --sk-space-1: 4px;  --sk-space-2: 8px;  --sk-space-3: 12px; --sk-space-4: 16px;
  --sk-space-5: 24px; --sk-space-6: 32px; --sk-space-7: 40px; --sk-space-8: 48px;
  --sk-space-9: 64px; --sk-space-10: 80px;--sk-space-11: 96px;--sk-space-12: 120px;--sk-space-13: 160px;

  /* ---- Radius ---- */
  --sk-radius-sm: 8px; --sk-radius-md: 12px; --sk-radius-lg: 16px; --sk-radius-xl: 24px; --sk-radius-pill: 999px;

  /* ---- Shadow (exactly 3 levels; borders preferred over shadows) ---- */
  --sk-shadow-1: 0 1px 2px rgba(14,19,48,.06), 0 1px 1px rgba(14,19,48,.04);     /* subtle control */
  --sk-shadow-2: 0 8px 24px -8px rgba(14,19,48,.18);                            /* floating menu */
  --sk-shadow-3: 0 30px 70px -30px rgba(14,19,48,.45);                          /* major showcase */

  /* ---- Motion ---- */
  --sk-dur-micro: 140ms; --sk-dur: 220ms; --sk-dur-lg: 320ms;
  --sk-ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Z-index ---- */
  --sk-z-dropdown: 1000; --sk-z-sticky: 1020; --sk-z-overlay: 1040; --sk-z-modal: 1050; --sk-z-toast: 1060;

  /* ---- Container ---- */
  --sk-container: 1280px; --sk-container-narrow: 760px; --sk-measure: 68ch;
  --sk-focus-ring: 0 0 0 3px rgba(109,40,217,.35);  /* violet accent focus */
}

/* ---- Container ---- */
.sk-wrap { width: 100%; max-width: var(--sk-container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 48px); }
.sk-wrap--narrow { max-width: var(--sk-container-narrow); }
.sk-measure { max-width: var(--sk-measure); }

/* ---- Typography helpers ---- */
.sk-display { font-family: var(--sk-font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--sk-ink); }
.sk-h1 { font-family: var(--sk-font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 5.25rem); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; color: var(--sk-ink); }
.sk-h2 { font-family: var(--sk-font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: var(--sk-ink); }
.sk-lead { font-family: var(--sk-font-ui); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--sk-ink-2); max-width: var(--sk-measure); }
.sk-eyebrow { font-family: var(--sk-font-ui); font-size: var(--sk-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sk-muted); }

/* ---- Buttons: 4 variants × 3 sizes (spec §8) ---- */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sk-font-ui); font-weight: 700; font-size: 15px; line-height: 1;
  height: 42px; padding: 0 18px; border-radius: var(--sk-radius-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--sk-dur-micro) var(--sk-ease), border-color var(--sk-dur-micro) var(--sk-ease), color var(--sk-dur-micro) var(--sk-ease), opacity var(--sk-dur-micro) var(--sk-ease);
}
.sk-btn--sm { height: 36px; padding: 0 14px; font-size: var(--sk-text-sm); }
.sk-btn--lg { height: 50px; padding: 0 26px; font-size: var(--sk-text-lg); }
.sk-btn--primary { background: var(--sk-ink); color: #fff; }
.sk-btn--primary:hover { background: var(--sk-navy-2); }
.sk-btn--brand { background: var(--sk-gradient); color: #fff; }          /* the controlled gradient CTA */
.sk-btn--brand:hover { filter: brightness(1.06); }
.sk-btn--secondary { background: var(--sk-surface); color: var(--sk-ink); border-color: var(--sk-line); }
.sk-btn--secondary:hover { border-color: var(--sk-ink); }
.sk-btn--ghost { background: transparent; color: var(--sk-ink); }
.sk-btn--ghost:hover { background: var(--sk-surface-2); }
.sk-btn--destructive { background: var(--sk-danger); color: #fff; }
.sk-btn--destructive:hover { background: #991B1B; }
.sk-btn:disabled, .sk-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.sk-btn:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.sk-btn--loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: sk-spin .7s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* ---- Card: must earn its place (spec §9); border over shadow (spec §6) ---- */
.sk-card { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: var(--sk-space-5); }
.sk-card--pad-lg { padding: var(--sk-space-6); }
.sk-card--float { box-shadow: var(--sk-shadow-2); border-color: transparent; }

/* ---- Form controls ---- */
.sk-field { font-family: var(--sk-font-ui); font-size: var(--sk-text-base); color: var(--sk-ink); background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-md); height: 44px; padding: 0 14px; width: 100%; transition: border-color var(--sk-dur-micro) var(--sk-ease), box-shadow var(--sk-dur-micro) var(--sk-ease); }
textarea.sk-field { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; }
.sk-field::placeholder { color: var(--sk-faint); }
.sk-field:focus-visible, .sk-field:focus { outline: none; border-color: var(--sk-violet); box-shadow: var(--sk-focus-ring); }
.sk-label { display: inline-block; font-family: var(--sk-font-ui); font-size: var(--sk-text-sm); font-weight: 600; color: var(--sk-ink-2); margin-bottom: 6px; }

/* ---- Pills / badges / chips (pills ONLY for tags/status/filters, spec §6) ---- */
.sk-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sk-font-ui); font-size: var(--sk-text-sm); font-weight: 600; padding: 6px 13px; border-radius: var(--sk-radius-pill); border: 1px solid var(--sk-line); background: var(--sk-surface); color: var(--sk-ink-2); cursor: pointer; }
.sk-pill[aria-pressed="true"], .sk-pill.is-on { background: var(--sk-navy); border-color: transparent; color: #fff; }
.sk-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sk-font-ui); font-size: var(--sk-text-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--sk-radius-pill); letter-spacing: .02em; }
.sk-badge--success { background: var(--sk-success-soft); color: var(--sk-success); }
.sk-badge--warning { background: var(--sk-warning-soft); color: var(--sk-warning); }
.sk-badge--danger  { background: var(--sk-danger-soft);  color: var(--sk-danger); }
.sk-badge--info    { background: var(--sk-info-soft);    color: var(--sk-info); }
.sk-badge--brand   { background: rgba(109,40,217,.10);   color: var(--sk-violet-dark); }

/* ---- Icons: one stroke family (Lucide), sized per spec §7 ---- */
.sk-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sk-icon--sm { width: 16px; height: 16px; }
.sk-icon--lg { width: 24px; height: 24px; }

/* ---- Accessibility: visible focus everywhere; reduced motion ---- */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--sk-focus-ring); border-radius: var(--sk-radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}