/* ====================================================================
   Shefa Design System — Base tokens
   Drop this file into any HTML doc and reference the vars below.
   Pair with Manrope from Google Fonts (or licensed Satoshi Rounded).
   ==================================================================== */

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

:root {
  /* --- Brand colors: PRIMARY (purple + white) ---------------------- */
  --shefa-purple-50:  #F4F0FF;
  --shefa-purple-100: #E9DEFF;
  --shefa-purple-200: #C9B0FF;
  --shefa-purple-300: #A78BFA;
  --shefa-purple-400: #8A5CFF;   /* brand purple — light step */
  --shefa-purple-500: #6C3BFF;   /* brand purple — primary */
  --shefa-purple-600: #5A2EE6;
  --shefa-purple-700: #4A24BF;
  --shefa-purple-800: #361A8C;

  /* --- Brand colors: ALTERNATE (red + white) ----------------------- */
  --shefa-red-300: #FF8B8E;
  --shefa-red-400: #FF4D4F;
  --shefa-red-500: #D72638;
  --shefa-red-600: #B11D2C;

  /* --- Neutrals ---------------------------------------------------- */
  --shefa-ink:       #111827;
  --shefa-ink-deep:  #0A0E1A;     /* page background on dark */
  --shefa-ink-card:  #0F1525;     /* card surface on dark */
  --shefa-ink-line:  #1F2937;     /* hairline on dark */

  --shefa-paper:     #FFFFFF;
  --shefa-paper-soft:#F3F4F6;     /* page background on light */
  --shefa-paper-card:#FFFFFF;
  --shefa-paper-line:#E5E7EB;

  --shefa-mute-300:  #9CA3AF;
  --shefa-mute-500:  #6B7280;
  --shefa-mute-700:  #374151;

  /* --- Gradients (signature) -------------------------------------- */
  --shefa-grad-brand:  linear-gradient(135deg, #6C3BFF 0%, #8A5CFF 100%);
  --shefa-grad-brand-soft: linear-gradient(135deg, rgba(108,59,255,0.16) 0%, rgba(138,92,255,0.06) 100%);
  --shefa-grad-red:    linear-gradient(135deg, #D72638 0%, #FF4D4F 100%);
  --shefa-grad-hero:   radial-gradient(60% 80% at 80% 30%, rgba(108,59,255,0.28), transparent 70%);

  /* --- Semantic foreground/background ----------------------------- */
  --fg-strong:  var(--shefa-paper);
  --fg:         #E5E7EB;
  --fg-mute:    var(--shefa-mute-300);
  --fg-faint:   var(--shefa-mute-500);

  --bg:         var(--shefa-ink-deep);
  --bg-elev:    var(--shefa-ink-card);
  --bg-line:    var(--shefa-ink-line);

  --accent:     var(--shefa-purple-500);
  --accent-soft:var(--shefa-purple-400);
  --accent-ink: #FFFFFF;
  --signal:     var(--shefa-red-500);

  /* --- Typography ------------------------------------------------- */
  --font-display: 'Manrope', 'Satoshi Rounded', 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* Scale — a 1.25 modular scale anchored at 16px body */
  --fs-12: 0.75rem;     /* 12 — eyebrow / micro label */
  --fs-14: 0.875rem;    /* 14 — small text */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — lead */
  --fs-20: 1.25rem;     /* 20 — h5 */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-60: 3.75rem;     /* 60 — h1 */
  --fs-80: 5rem;        /* 80 — display */

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Line-heights */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Tracking */
  --ls-display: -0.025em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-eyebrow: 0.18em;

  /* --- Spacing (4px base) ---------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  /* --- Radii ----------------------------------------------------- */
  --r-1: 6px;
  --r-2: 8px;     /* chips, inputs */
  --r-3: 10px;    /* buttons */
  --r-4: 16px;    /* cards */
  --r-5: 24px;    /* hero containers */
  --r-6: 28px;    /* app icons */
  --r-full: 9999px;

  /* --- Shadows --------------------------------------------------- */
  --sh-soft:   0 1px 2px rgba(17,24,39,0.06), 0 4px 12px rgba(17,24,39,0.08);
  --sh-card:   0 2px 4px rgba(17,24,39,0.06), 0 12px 32px rgba(17,24,39,0.10);
  --sh-pop:    0 8px 24px rgba(17,24,39,0.16), 0 24px 64px rgba(17,24,39,0.18);

  /* Glows (use on dark) */
  --glow-brand:    0 0 24px rgba(108,59,255,0.32);
  --glow-brand-lg: 0 0 60px rgba(108,59,255,0.45);
  --glow-red:      0 0 24px rgba(215,38,56,0.32);

  /* --- Focus ring ------------------------------------------------ */
  --ring: 0 0 0 2px var(--shefa-ink-deep), 0 0 0 4px rgba(138,92,255,0.6);

  /* --- Motion ---------------------------------------------------- */
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  360ms;

  /* --- Layout ---------------------------------------------------- */
  --content-max: 1280px;
  --gutter-mobile: 24px;
  --gutter-desktop: 64px;

  /* --- Site theme tokens ------------------------------------------ */
  color-scheme: dark;
  --page: #0A0E1A;
  --page-soft: #0F1525;
  --surface: #0F1525;
  --surface-raised: #111827;
  --surface-muted: rgba(255,255,255,0.03);
  --surface-glass: rgba(15,21,37,0.86);
  --header-glass: rgba(10,14,26,0.95);
  --line: #1F2937;
  --line-strong: #374151;
  --text-strong: #FFFFFF;
  --text: #E5E7EB;
  --text-muted: #9CA3AF;
  --text-faint: #6B7280;
  --text-disabled: #374151;
  --accent-faint: #C9B0FF;
  --on-accent: #FFFFFF;
  --accent-wash: rgba(108,59,255,0.12);
  --accent-wash-strong: rgba(108,59,255,0.22);
  --shadow-card: 0 18px 48px rgba(0,0,0,0.34);
  --shadow-glow: 0 0 40px rgba(108,59,255,0.22);
  --hero-bg: radial-gradient(70% 80% at 80% 20%, rgba(108,59,255,0.22), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(108,59,255,0.10), transparent 60%), var(--page);
  --section-glow: radial-gradient(60% 80% at 50% 100%, rgba(108,59,255,0.10), transparent 70%);
  --field-bg: rgba(10,14,26,0.6);
  --image-overlay: linear-gradient(transparent, rgba(15,21,37,0.85));
  --mockup-surface: #0F1525;
  --mockup-bar: #0A0E1A;
  --mockup-text: #FFFFFF;
  --mockup-muted: #9CA3AF;
  --mockup-faint: #6B7280;
  --mockup-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(138,92,255,0.18) inset;
  --wizard-surface: rgba(15,21,37,0.9);
  --wizard-rail: rgba(10,14,26,0.74);
  --wizard-option: rgba(255,255,255,0.04);
  --wizard-option-active: linear-gradient(180deg, rgba(108,59,255,0.22), rgba(108,59,255,0.07));
  --wizard-divider: rgba(255,255,255,0.08);
  --wizard-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(108,59,255,0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #FBFAFF;
  --page-soft: #F5F1FF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-muted: rgba(108,59,255,0.045);
  --surface-glass: rgba(255,255,255,0.86);
  --header-glass: rgba(255,255,255,0.92);
  --line: #E7E0F7;
  --line-strong: #CFC3EA;
  --text-strong: #090A17;
  --text: #1F2937;
  --text-muted: #4B5563;
  --text-faint: #6B7280;
  --text-disabled: #A7A1B7;
  --accent-faint: #5A2EE6;
  --on-accent: #FFFFFF;
  --accent-wash: rgba(108,59,255,0.10);
  --accent-wash-strong: rgba(108,59,255,0.18);
  --shadow-card: 0 12px 34px rgba(49,31,103,0.12);
  --shadow-glow: 0 18px 55px rgba(108,59,255,0.16);
  --hero-bg: radial-gradient(52% 58% at 84% 18%, rgba(138,92,255,0.22), transparent 68%), radial-gradient(46% 44% at 9% 88%, rgba(108,59,255,0.10), transparent 64%), linear-gradient(180deg,#FFFFFF 0%,#FBFAFF 58%,#F5F1FF 100%);
  --section-glow: radial-gradient(60% 80% at 50% 100%, rgba(108,59,255,0.08), transparent 70%);
  --field-bg: rgba(255,255,255,0.82);
  --image-overlay: linear-gradient(transparent, rgba(10,14,26,0.76));
  --mockup-surface: #FFFFFF;
  --mockup-bar: #F8F5FF;
  --mockup-text: #090A17;
  --mockup-muted: #4B5563;
  --mockup-faint: #6B7280;
  --mockup-shadow: 0 24px 56px rgba(49,31,103,0.22), 0 0 0 1px rgba(138,92,255,0.22) inset;
  --wizard-surface: rgba(255,255,255,0.94);
  --wizard-rail: #111827;
  --wizard-option: rgba(108,59,255,0.045);
  --wizard-option-active: linear-gradient(180deg, rgba(108,59,255,0.18), rgba(108,59,255,0.06));
  --wizard-divider: rgba(108,59,255,0.14);
  --wizard-shadow: 0 28px 70px rgba(49,31,103,0.18), 0 0 60px rgba(108,59,255,0.10);
}

/* ====================================================================
   SEMANTIC ELEMENT STYLES (drop-in)
   ==================================================================== */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-60);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

p { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg); }
.lead { font-size: var(--fs-18); color: var(--fg); }
.small { font-size: var(--fs-14); color: var(--fg-mute); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-soft);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(108,59,255,0.10);
  color: var(--accent-soft);
  padding: 1px 6px;
  border-radius: var(--r-1);
}

a { color: var(--accent-soft); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-std); }
a:hover { opacity: 0.8; }

/* Display text — for hero numerals and ultra-large display */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-80);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}

/* The signature wordmark — use for inline "Shefa;" references */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.wordmark::after { content: ';'; color: var(--accent-soft); }