/* ==========================================================================
   The Practical Claude Course — Shared Design Tokens (Serenity Brands system)
   Single source of truth for both the marketing landing page and the Docsify
   course site. Page-specific layout/component CSS lives elsewhere; this file
   only defines tokens, fonts, and base typography.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* ===== Primary ===== */
  --clay-black: #000000;
  --pure-white: #ffffff;
  --warm-cream: #faf9f7;
  --warm-cream-deep: #f4f0e7;       /* slightly deeper cream for table stripes etc. */

  /* ===== Swatch palette (named like flavors) ===== */
  --matcha-300: #84e7a5;
  --matcha-600: #078a52;
  --matcha-800: #02492a;
  --matcha-tint: #e6f8ed;

  --slushie-500: #3bd3fd;

  --lemon-400: #f8cc65;
  --lemon-500: #fbbd41;
  --lemon-700: #d08a11;
  --lemon-800: #9d6a09;
  --lemon-tint: #fdf2dc;

  --ube-300: #c1b0ff;
  --ube-800: #43089f;
  --ube-900: #32037d;
  --ube-tint: #efeaff;

  --pomegranate-400: #fc7981;
  --pomegranate-tint: #fdebec;
  --blueberry-800: #01418d;
  --dragonfruit-500: #e83a8e;

  /* ===== Warm neutrals ===== */
  --warm-silver: #9f9b93;
  --warm-charcoal: #55534e;
  --dark-charcoal: #333333;

  /* ===== Surface & border ===== */
  --oat-border: #dad4c8;
  --oat-light: #eee9df;
  --outlined-stroke: #717989;

  /* ===== Focus ===== */
  --focus-ring: rgb(20, 110, 245);

  /* ===== Semantic role aliases (what the rest of the system pulls from) ===== */
  --bg-page: var(--warm-cream);
  --bg-surface: var(--pure-white);
  --bg-surface-deep: var(--warm-cream-deep);
  --fg-primary: var(--clay-black);
  --fg-secondary: var(--warm-charcoal);
  --fg-tertiary: var(--warm-silver);
  --border-default: var(--oat-border);
  --border-light: var(--oat-light);
  --accent: var(--matcha-600);
  --accent-deep: var(--matcha-800);
  --accent-soft: var(--matcha-tint);

  /* Code surfaces — dark warm ink, matched to the pain-points section on landing */
  --code-bg: #1a1612;
  --code-fg: var(--warm-cream);

  /* ===== Shadows ===== */
  --shadow-clay:
    rgba(0, 0, 0, 0.10) 0 1px 1px,
    rgba(0, 0, 0, 0.04) 0 -1px 1px inset,
    rgba(0, 0, 0, 0.05) 0 -0.5px 1px;

  /* ===== Radii ===== */
  --radius-sharp: 4px;
  --radius-card: 12px;
  --radius-feature: 24px;
  --radius-section: 40px;
  --radius-pill: 1584px;

  /* ===== Type families ===== */
  --font-sans: "Roobert", "Manrope", "Arial", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Aliases so the Docsify side can use familiar names */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  /* OpenType stylistic sets — these define Roobert's character */
  --otf-display: "ss01", "ss03", "ss10", "ss11", "ss12";
  --otf-body:    "ss03", "ss10", "ss11", "ss12";

  /* ===== Container ===== */
  --container: 1180px;
}

/* Base body styling — both surfaces get the warm cream + Manrope baseline. */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}