/* ============================================================================
   Codocode Design System — colors & type
   --------------------------------------------------------------------------
   Drop this file in and `@import` it from any page. It defines:
     1) Web fonts (loaded from Google Fonts CDN)
     2) Color tokens (--bg-*, --fg-*, --brand-*, --accent-*, --status-*, --border-*)
     3) Spacing / radius / shadow / motion tokens
     4) Semantic typography classes (.h1, .h2, .body, .caption, .code, etc.)
   ============================================================================ */

/* --- Fonts ---------------------------------------------------------------- */
/* Brand pairing: Google Sans (display) + Roboto (body).
   Google Sans is a Google-INTERNAL font; only the italic variable TTF has
   been uploaded so far (see fonts/). The upright weights still fall back to
   Plus Jakarta Sans — a freely-licensed lookalike with very close metrics.
   Roboto, Newsreader and Roboto Mono come from Google Fonts. */

/* Local: Google Sans italic, variable wght / opsz / GRAD axes.
   Registered under a DISTINCT family name so it never satisfies an upright
   font request — that lets the upright display stack fall through cleanly
   to Plus Jakarta Sans until the upright TTFs are uploaded. */
@font-face {
  font-family: 'Google Sans Italic';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
}

/* Upright Google Sans — the family used by the wordmark, logos and all
   display headings. Self-hosted from the uploaded variable Roman file
   (axes: opsz, wght, GRAD). This is the upright companion to the italic
   variable font registered above. */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Newsreader:ital,wght@1,300;1,400;1,500&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* --- Color: surfaces --- */
  --bg-page:           #FFFFFF;
  --bg-elevated:       #F8FAFC; /* slate-50, used for cards on white */
  --bg-dark:           #09090B; /* the brand near-black */
  --bg-dark-elevated:  #0F1115; /* cards within dark sections */

  /* --- Color: foreground / text --- */
  --fg-primary:               #0F172A; /* slate-900 */
  --fg-secondary:             #64748B; /* slate-500 — body copy */
  --fg-tertiary:              #94A3B8; /* slate-400 — captions, idle icons */
  --fg-on-dark:               #FFFFFF;
  --fg-on-dark-secondary:     #94A3B8;
  --fg-on-dark-tertiary:      #64748B;

  /* --- Color: brand & accents --- */
  --brand-blue:        #2563EB; /* primary brand blue, buttons + links */
  --brand-blue-bright: #3B82F6; /* glows, secondary blue */
  --brand-blue-soft:   #60A5FA; /* active states, illuminated numerals */
  --accent-purple:     #A855F7;
  --accent-pink:       #EC4899;
  --accent-fuchsia:    #D946EF;
  --accent-rose:       #FB7185;

  /* --- Color: status --- */
  --status-success:    #10B981; /* emerald-500 */
  --status-success-soft: rgba(16, 185, 129, 0.10);
  --status-success-ring: rgba(16, 185, 129, 0.20);
  --status-info:       #3B82F6;
  --status-info-soft:  rgba(59, 130, 246, 0.10);
  --status-info-ring:  rgba(59, 130, 246, 0.20);

  /* --- Color: borders --- */
  --border-soft:       #E2E8F0; /* slate-200 — on white */
  --border-hairline:   rgba(226, 232, 240, 0.50); /* slate-200/50 — translucent header */
  --border-dark:       #1E293B; /* slate-800 — on near-black */
  --border-dark-soft:  rgba(30, 41, 59, 0.50);

  /* --- Spacing scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;   /* card padding */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;   /* section rhythm */

  /* --- Radii --- */
  --radius-sm:  8px;   /* tiny icon tiles */
  --radius-md:  12px;  /* buttons, inputs */
  --radius-lg:  16px;  /* inline floating cards, FAQ panels */
  --radius-xl:  24px;  /* audience cards */
  --radius-2xl: 32px;  /* bento grid container */
  --radius-3xl: 40px;  /* CTA capsule, footer block */
  --radius-pill: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10);
  /* The signature "Bento glass" 6-step stack. */
  --shadow-bento:
    0 0 0 1px rgba(0,0,0,0.06),
    0 1px 1px -0.5px rgba(0,0,0,0.06),
    0 3px 3px -1.5px rgba(0,0,0,0.06),
    0 6px 6px -3px rgba(0,0,0,0.06),
    0 12px 12px -6px rgba(0,0,0,0.06),
    0 24px 24px -12px rgba(0,0,0,0.06);
  --shadow-brand-glow:       0 0 30px rgba(37, 99, 235, 0.20);
  --shadow-brand-glow-hover: 0 0 40px rgba(37, 99, 235, 0.40);
  --shadow-step-active:      0 0 20px rgba(59, 130, 246, 0.60);

  /* --- Motion --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     150ms;
  --dur-base:     300ms;
  --dur-slow:     700ms;
  --dur-ambient:  8s;        /* blobs, shine borders, gradient stops */

  /* --- Typography: families --- */
  --font-display: 'Google Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, sans-serif;
  --font-serif:   'Newsreader', Georgia, serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Typography: type scale (px sizes, applied via classes below) --- */
  --text-hero:   96px;   /* h1 lg+ */
  --text-h1:     72px;
  --text-h2:     48px;
  --text-h3:     32px;
  --text-h4:     24px;
  --text-lead:   20px;   /* hero paragraph */
  --text-body:   16px;
  --text-sm:     14px;
  --text-xs:     12px;
  --text-eyebrow: 10px;  /* uppercase tracked label */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;
}

/* --- Semantic typography classes ----------------------------------------- */

/* Hero. Light/normal weight, tight tracking, with optional gradient fill. */
.h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, var(--text-hero));
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* Big section heading — pairs solid + gradient span. */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, var(--text-h2));
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* The poetic italic-serif accent. */
.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-secondary);
}

/* Brand-blue typeset gradient on the secondary half of a two-span headline. */
.gradient-fill {
  background-image: linear-gradient(to bottom, var(--fg-tertiary), var(--fg-secondary));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.gradient-fill-brand {
  background-image: linear-gradient(to right, var(--brand-blue-bright), var(--accent-purple), var(--accent-pink));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Lead paragraph (e.g. the line under the H1). */
.lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* Body copy — the most-used class. */
.body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* Caption / supporting text (e.g. "Monthly · Free · Kuwait City"). */
.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

/* Eyebrow / kicker label. ALL CAPS, tracked. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-tertiary);
}

/* Inline code / monospace. */
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--fg-primary);
}

/* Wordmark — the compact header form. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* Monumental wordmark — the footer form, with the literal semicolon. */
.wordmark-monumental {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 220px);
  letter-spacing: var(--tracking-tighter);
  line-height: 0.9;
  color: currentColor;
}