/* ============================================================
   Kuwait Assignment Help — Design Tokens
   Colors, typography, spacing, radii, shadows, motion
   ============================================================ */

/* Webfonts via Google Fonts CDN.
   Per the live site: Nunito is the primary face (body + display, ~3,700 uses);
   Inter is the secondary face for fine UI / labels (~77 uses).
   To self-host, drop .woff2 files in /fonts and swap @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — BRAND ---------- */
  /* Deep academic blue — authority, trust */
  --brand-blue-50:  #EEF3FF;
  --brand-blue-100: #DCE6FE;
  --brand-blue-200: #B6CAFD;
  --brand-blue-300: #82A4FB;
  --brand-blue-400: #4E7CF6;
  --brand-blue-500: #2A5BEA;   /* primary accent */
  --brand-blue-600: #1B41C9;   /* hover */
  --brand-blue-700: #1A37A4;
  --brand-blue-800: #15296E;   /* primary brand — navy */
  --brand-blue-900: #0E1D4F;

  /* Warm gold — the conversion CTA */
  --brand-gold-50:  #FFFAEB;
  --brand-gold-100: #FFF1C6;
  --brand-gold-200: #FFE08A;
  --brand-gold-300: #FFCE52;
  --brand-gold-400: #FFBD24;   /* primary CTA fill */
  --brand-gold-500: #F5A800;   /* hover */
  --brand-gold-600: #C98200;
  --brand-gold-700: #936000;

  /* ---------- COLOR — NEUTRAL ---------- */
  --white:   #FFFFFF;
  --ink-50:  #F7F8FB;   /* off-white surface */
  --ink-100: #EEF1F6;   /* hairline / muted card */
  --ink-200: #DDE3EC;   /* borders */
  --ink-300: #C2CAD7;   /* dividers strong */
  --ink-400: #8A95A8;   /* placeholder text */
  --ink-500: #5F6B82;   /* secondary text */
  --ink-600: #404C63;   /* body alt */
  --ink-700: #2A3447;   /* body */
  --ink-800: #1A2236;   /* headings */
  --ink-900: #0E1525;   /* near-black */

  /* ---------- COLOR — SEMANTIC ---------- */
  --success-50:  #E6F8EF;
  --success-500: #19A463;
  --success-700: #0F6B40;

  --warning-50:  #FFF6E5;
  --warning-500: #E89600;
  --warning-700: #8A5A00;

  --danger-50:  #FDECEC;
  --danger-500: #D6362F;
  --danger-700: #8C1F1A;

  --info-50:  #E8F1FF;
  --info-500: #2A5BEA;
  --info-700: #1A37A4;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:           var(--white);
  --bg-soft:      var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-invert:    var(--brand-blue-800);

  --surface:      var(--white);
  --surface-soft: var(--ink-50);

  --fg:           var(--ink-800);    /* primary text */
  --fg-strong:    var(--ink-900);    /* headings on light */
  --fg-muted:     var(--ink-500);    /* secondary text */
  --fg-subtle:    var(--ink-400);    /* placeholder / meta */
  --fg-invert:    var(--white);      /* text on navy */

  --border:       var(--ink-200);
  --border-soft:  var(--ink-100);
  --border-strong:var(--ink-300);

  --accent:       var(--brand-blue-500);
  --accent-bg:    var(--brand-blue-50);
  --accent-fg:    var(--brand-blue-700);

  --cta:          var(--brand-gold-400);
  --cta-hover:    var(--brand-gold-500);
  --cta-fg:       var(--ink-900);    /* dark ink on yellow for contrast */

  /* ---------- TYPOGRAPHY — FAMILIES ----------
     Primary: Nunito (warm, friendly, rounded geometric — used on body + headings)
     Secondary: Inter (for labels, meta, micro-UI, dashboard tables) */
  --font-display: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  /* Display / hero scale — large, bold */
  --fs-display:  clamp(2.5rem, 4.6vw + 1rem, 4.5rem);   /* 40–72 */
  --fs-h1:       clamp(2rem, 2.4vw + 1.2rem, 3rem);     /* 32–48 */
  --fs-h2:       clamp(1.625rem, 1.4vw + 1rem, 2.25rem);/* 26–36 */
  --fs-h3:       1.5rem;       /* 24 */
  --fs-h4:       1.25rem;      /* 20 */
  --fs-h5:       1.125rem;     /* 18 */
  --fs-lead:     1.25rem;      /* 20 — subhead under hero */
  --fs-body:     1rem;         /* 16 */
  --fs-small:    0.875rem;     /* 14 */
  --fs-micro:    0.75rem;      /* 12 — labels */

  /* Line-heights — tight on display, generous on body */
  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body:    1.65;
  --lh-tight:   1.35;

  /* Letter-spacing — Nunito is naturally a touch wider than Manrope, so we trim less */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.08em;   /* eyebrow / uppercase labels */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4 */
  --space-2:   0.5rem;   /*  8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Section rhythm — generous; hero & feature breaks */
  --section-y-sm: 4rem;
  --section-y-md: 6rem;
  --section-y-lg: 8rem;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1200px;   /* default page max */
  --container-2xl:1320px;

  /* ---------- RADII ---------- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md: 12px;   /* small cards, inputs */
  --radius-lg: 16px;   /* buttons, chips */
  --radius-xl: 20px;   /* cards */
  --radius-2xl: 28px;  /* feature cards / hero panels */
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, premium ---------- */
  --shadow-xs:  0 1px 2px rgba(14,29,79,0.05);
  --shadow-sm:  0 2px 6px rgba(14,29,79,0.06), 0 1px 2px rgba(14,29,79,0.04);
  --shadow-md:  0 8px 22px rgba(14,29,79,0.07), 0 2px 6px rgba(14,29,79,0.05);
  --shadow-lg:  0 18px 48px rgba(14,29,79,0.10), 0 4px 12px rgba(14,29,79,0.05);
  --shadow-xl:  0 30px 80px rgba(14,29,79,0.14);
  --shadow-cta: 0 10px 28px rgba(255,189,36,0.45);
  --shadow-ring: 0 0 0 4px rgba(42,91,234,0.18);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Z LAYERS ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 60;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* ============================================================
   SEMANTIC TYPE — drop-in element styles
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black);    line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);     line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -0.022em;
  color: var(--fg-strong);
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-600);
  text-wrap: pretty;
}

p { margin: 0 0 var(--space-4); color: var(--fg); text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-blue-600);
}

.meta {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--brand-blue-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-blue-700); }

::selection { background: var(--brand-gold-200); color: var(--ink-900); }