/**
 * Stackforge Academy — Design Tokens
 * -----------------------------------------------------------------------
 * Single source of truth for the visual identity. Every component file
 * consumes these custom properties instead of hard-coded values, so the
 * whole theme can be re-skinned by editing this file alone (or overriding
 * a subset via the Customizer — see inc/customizer.php).
 *
 * Palette rationale: a near-black "ink" navy (not pure #000) paired with
 * a warm neutral paper background, an indigo brand color, and a mono
 * typeface used deliberately for labels/badges/breadcrumbs — reflecting
 * that this is a programming academy, not a generic course marketplace.
 * -----------------------------------------------------------------------
 */

:root {
  /* ---------- Color: neutrals ---------- */
  --sf-ink:            #12141c;   /* near-black navy — dark sections, nav, footer */
  --sf-ink-soft:       #1c2030;   /* elevated dark surface (cards on ink bg) */
  --sf-paper:          #f7f7f4;   /* main light background */
  --sf-surface:        #ffffff;   /* card / panel surface on paper */
  --sf-border:         #e6e6e1;   /* hairline borders on light surfaces */
  --sf-border-strong:  #d3d3cd;

  --sf-slate-900:      #1a1c25;   /* primary text on light */
  --sf-slate-600:      #565b6d;   /* secondary text */
  --sf-slate-400:      #8b90a1;   /* placeholder / muted */
  --sf-slate-200:      #cdd0da;   /* borders on dark surfaces */
  --sf-on-ink:         #f2f2ef;   /* primary text on dark */
  --sf-on-ink-muted:   #9ea3b5;   /* secondary text on dark */

  /* ---------- Color: brand ---------- */
  --sf-indigo:         #4438ca;   /* primary brand — buttons, links, focus */
  --sf-indigo-600:     #372db0;   /* hover/active */
  --sf-indigo-100:     #e7e4fb;   /* tints — badges, hover backgrounds */
  --sf-indigo-50:      #f3f2fe;

  --sf-green:          #1e9e6c;   /* success / progress / "passing" signal */
  --sf-green-100:      #dcf3ea;
  --sf-amber:          #e8a33d;   /* accent / highlight / featured badges */
  --sf-amber-100:      #fbf0dd;
  --sf-red:            #d64545;   /* error / destructive */
  --sf-red-100:        #fbe4e4;

  /* ---------- Typography ---------- */
  --sf-font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --sf-font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --sf-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (mobile-first; clamps grow toward desktop) */
  --sf-text-xs:   0.8125rem;                              /* 13px */
  --sf-text-sm:   0.9375rem;                               /* 15px */
  --sf-text-base: 1rem;                                    /* 16px */
  --sf-text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --sf-text-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --sf-text-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);
  --sf-text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --sf-text-4xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
  --sf-text-5xl:  clamp(2.75rem, 1.9rem + 4vw, 4.25rem);

  --sf-leading-tight: 1.15;
  --sf-leading-snug:  1.35;
  --sf-leading-normal: 1.6;

  --sf-weight-regular: 400;
  --sf-weight-medium:  500;
  --sf-weight-semibold: 600;
  --sf-weight-bold:    700;

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

  /* ---------- Layout ---------- */
  --sf-container-width: 1200px;
  --sf-container-pad:   var(--sf-space-5);
  --sf-header-height:   72px;

  /* ---------- Radius ---------- */
  --sf-radius-sm:   6px;
  --sf-radius-md:   10px;
  --sf-radius-lg:   16px;
  --sf-radius-xl:   24px;
  --sf-radius-full: 999px;

  /* ---------- Shadow (tinted with ink, not pure gray) ---------- */
  --sf-shadow-sm: 0 1px 2px rgba(18, 20, 28, 0.06);
  --sf-shadow-md: 0 6px 16px rgba(18, 20, 28, 0.08);
  --sf-shadow-lg: 0 16px 40px rgba(18, 20, 28, 0.14);
  --sf-shadow-focus: 0 0 0 3px rgba(68, 56, 202, 0.35);

  /* ---------- Motion ---------- */
  --sf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-duration-fast: 120ms;
  --sf-duration-base: 200ms;
  --sf-duration-slow: 360ms;

  /* ---------- Z-index scale ---------- */
  --sf-z-nav: 100;
  --sf-z-dropdown: 200;
  --sf-z-modal-backdrop: 300;
  --sf-z-modal: 310;
  --sf-z-toast: 400;
}

/*
 * Breakpoints (documented here, used as literal values in media queries
 * since CSS lacks custom-property support inside @media conditions):
 *   sm: 480px   tablet-portrait: 640px   md: 768px
 *   lg: 1024px  xl: 1280px
 * Mobile-first: base styles target the smallest viewport; min-width
 * queries progressively enhance for larger screens.
 */