/* ══════════════════════════════════════════════════════════
   LeHisab Design System — Colors & Typography Tokens
   ══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=Dancing+Script:wght@400;500;600;700&display=swap");

:root {
  /* ─── Brand ─────────────────────────────────────────── */
  --color-primary:        #2456E8;  /* buttons, links, active states, icons — blue means "clickable" */
  --color-primary-hover:  #1B44C8;  /* button/link hover and pressed */
  --color-primary-light:  #EEF3FE;  /* icon tiles, selected pills, info badges */
  --color-primary-bg:     #F8FAFC;  /* alternating section tint */
  --color-navy:           #0B1F4D;  /* dark sections, CTA card, footer band */
  --color-accent:         #F5A524;  /* highlight words on navy, stars, badges — never text on white */

  /* ─── Hero / CTA Backgrounds ────────────────────────── */
  --color-hero-bg:        #0B1F4D;
  --color-cta-bg:         #0B1F4D;

  /* ─── On navy ───────────────────────────────────────── */
  --color-on-dark:        #FFFFFF;  /* headings; also the main button fill on navy */
  --color-on-dark-soft:   #B7C4E0;  /* paragraphs on navy */
  --color-on-dark-accent: #8FB0FF;  /* eyebrows, secondary highlights on navy */

  /* ─── Neutrals (slate) ──────────────────────────────── */
  --color-ink:            #0F172A;  /* all headings on light backgrounds */
  --color-ink-2:          #1E293B;
  --color-ink-3:          #334155;
  --color-body:           #475569;
  --color-muted:          #5F6F86;
  --color-subtle:         #5F6F86;  /* was #9CA3AF (2.5:1); kept as alias for contrast */
  --color-border-light:   #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-dark:    #CBD5E1;
  --color-surface:        #F8FAFC;
  --color-footer-bg:      #F8FAFC;
  --color-white:          #FFFFFF;

  /* ─── Status ────────────────────────────────────────── */
  --color-success:        #166534;
  --color-success-bg:     #E8F5EC;
  --color-warning:        #B45309;
  --color-warning-bg:     #FDF3E4;
  --color-error:          #B91C1C;
  --color-error-bg:       #FDECEC;

  /* ─── Functional Accents ────────────────────────────── */
  --color-section-tint:   #F8FAFC;
  --color-check:          #8FB0FF;  /* checkmarks on navy */
  --color-star:           #F5A524;

  /* ─── Typography ────────────────────────────────────── */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Dancing Script", cursive;

  /* ─── Spacing / Radius / Shadows ────────────────────── */
  --radius-sm:   8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  --shadow-card:       0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-btn:        0 1px 3px rgba(36,86,232,0.25);
  --shadow-btn-hover:  0 4px 14px rgba(36,86,232,0.3);
  --shadow-elevated:   0 8px 30px rgba(0,0,0,0.12);

  --container-max: 73rem;
}

/* ─── Type Scale ──────────────────────────────────────── */
.type-h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}
.type-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-body);
}
.type-small {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-muted);
}
.type-eyebrow {
  font-family: var(--font-sans);
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.type-script {
  font-family: var(--font-script);
  font-weight: 700;
}
.type-gradient-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--color-navy);
}