/* ============================================================
   CodeSkill Academy — Color & Type Foundations
   Load this first. Fonts come from Google Fonts CDN (no licensed
   files were provided — substitute self-hosted files later).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;     /* headlines, hero, numbers */
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* UI + paragraphs */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* code, IDs, labels */

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-display: 60px;   --lh-display: 1.04;  --ls-display: -0.025em;
  --fs-h1: 44px;        --lh-h1: 1.08;       --ls-h1: -0.02em;
  --fs-h2: 32px;        --lh-h2: 1.14;       --ls-h2: -0.015em;
  --fs-h3: 24px;        --lh-h3: 1.22;       --ls-h3: -0.01em;
  --fs-h4: 19px;        --lh-h4: 1.3;        --ls-h4: -0.005em;
  --fs-body-lg: 18px;   --lh-body-lg: 1.6;
  --fs-body: 16px;      --lh-body: 1.62;
  --fs-sm: 14px;        --lh-sm: 1.5;
  --fs-xs: 13px;        --lh-xs: 1.45;
  --fs-eyebrow: 13px;   --ls-eyebrow: 0.14em;  /* uppercase kicker / label */

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ============================================================
     COLOR — BASE PALETTE
     ============================================================ */

  /* Brand navy (deep, trust — used for dark surfaces, headings) */
  --navy-950: #070D1F;
  --navy-900: #0B1530;
  --navy-800: #0F1D3D;
  --navy-700: #16294F;
  --navy-600: #1F3A6B;
  --navy-500: #2C4E89;

  /* Brand blue (primary action — electric, confident) */
  --blue-700: #1648CC;
  --blue-600: #1D5BFF;   /* PRIMARY */
  --blue-500: #3B73FF;
  --blue-400: #6E97FF;
  --blue-100: #DCE6FF;
  --blue-50:  #EEF3FF;

  /* Accent amber (energy, highlights, ratings — used sparingly) */
  --amber-600: #E89200;
  --amber-500: #FFB323;
  --amber-200: #FFE3A6;
  --amber-50:  #FFF7E6;

  /* Neutral slate */
  --slate-950: #0C1322;
  --slate-800: #1E2638;
  --slate-700: #2C374C;
  --slate-600: #475069;
  --slate-500: #6B7689;
  --slate-400: #98A1B3;
  --slate-300: #C7CEDB;
  --slate-200: #E4E8F0;
  --slate-150: #EDF0F6;
  --slate-100: #F2F5FA;
  --slate-50:  #F7F9FC;
  --white: #FFFFFF;

  /* Semantic hues */
  --success-600: #0E8A5F;
  --success-500: #15A36E;
  --success-50:  #E7F6EF;
  --warning-600: #C97E00;
  --warning-500: #E8A317;
  --warning-50:  #FBF1DC;
  --danger-600:  #CB2F35;
  --danger-500:  #E5484D;
  --danger-50:   #FCECEC;

  /* ============================================================
     SEMANTIC TOKENS — reference these in product code
     ============================================================ */

  /* Surfaces / backgrounds */
  --bg-page: var(--slate-50);
  --bg-surface: var(--white);
  --bg-subtle: var(--slate-100);
  --bg-inset: var(--slate-150);
  --bg-dark: var(--navy-900);
  --bg-dark-elevated: var(--navy-800);

  /* Foreground / text */
  --fg-strong: var(--slate-950);   /* headings */
  --fg-default: var(--slate-700);  /* body */
  --fg-muted: var(--slate-500);    /* secondary */
  --fg-subtle: var(--slate-400);   /* captions, placeholders */
  --fg-on-dark: #EAF0FB;
  --fg-on-dark-muted: #9FB0CC;
  --fg-on-accent: var(--white);

  /* Brand / interactive */
  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-subtle: var(--blue-50);
  --brand-border: var(--blue-100);
  --accent: var(--amber-500);
  --accent-strong: var(--amber-600);

  /* Borders & dividers */
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-dark: rgba(255,255,255,0.10);
  --ring: rgba(29,91,255,0.35);  /* focus ring */

  /* ---------- RADII ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(11,21,48,0.06);
  --shadow-sm: 0 1px 3px rgba(11,21,48,0.08), 0 1px 2px rgba(11,21,48,0.04);
  --shadow-md: 0 6px 16px -4px rgba(11,21,48,0.10), 0 2px 6px -2px rgba(11,21,48,0.06);
  --shadow-lg: 0 18px 40px -12px rgba(11,21,48,0.16), 0 6px 14px -8px rgba(11,21,48,0.08);
  --shadow-brand: 0 10px 24px -8px rgba(29,91,255,0.45);
  --shadow-focus: 0 0 0 4px var(--ring);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in helper classes
   ============================================================ */

.cs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
.cs-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--fg-strong); }
.cs-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--fg-strong); }
.cs-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--fg-strong); }
.cs-h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-strong); }

.cs-body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-default); }
.cs-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-default); }
.cs-sm { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-muted); }

.cs-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.cs-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.01em; color: var(--fg-default); }
.cs-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--navy-700);
}