/* ==========================================================================
   Design tokens — InfoTech Learning
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Color: surfaces ------------------------------------------------- */
  --bg-0: #0a0c10;          /* page base, near-black */
  --bg-1: #0f131a;          /* section surface */
  --bg-2: #141b29;          /* raised surface, deep navy */
  --bg-3: #1a2334;          /* hover / active surface */

  /* --- Color: lines ---------------------------------------------------- */
  --line-0: #1a212d;        /* hairline on bg-0 */
  --line-1: #232d3d;        /* card border */
  --line-2: #33405a;        /* emphasised border */

  /* --- Color: text ----------------------------------------------------- */
  --text-0: #eef1f5;        /* headlines */
  --text-1: #c9d1dc;        /* body */
  --text-2: #8b95a5;        /* muted / metadata (4.6:1 on bg-0) */
  --text-3: #5f6b7c;        /* disabled / decorative labels */

  /* --- Color: accents -------------------------------------------------- */
  --cyan: #62c6e8;          /* illumination, links, focus */
  --cyan-2: #8ad8f2;        /* hover */
  --cyan-dim: rgba(98, 198, 232, 0.14);
  --cyan-line: rgba(98, 198, 232, 0.35);
  --blue: #3d7bf0;          /* rare, deep accent */
  --green: #3fbf7f;         /* status: healthy / complete */
  --green-dim: rgba(63, 191, 127, 0.14);
  --amber: #e0b35a;         /* status: in progress */
  --amber-dim: rgba(224, 179, 90, 0.14);
  --red: #e26d6d;           /* status: alert (used sparingly) */

  /* --- Typography ------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --track-display: -0.028em;
  --track-mono: 0.08em;

  /* --- Spacing (4px base) --------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4.5rem, 4rem + 4vw, 8rem);
  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radius ---------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--cyan-line), 0 0 24px -6px rgba(98, 198, 232, 0.35);

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --dur-reveal: 700ms;

  /* --- Z-index --------------------------------------------------------- */
  --z-nav: 100;
  --z-toast: 200;
}