/* ========================================================================
   Design tokens
   Method: skills/ui-skills.md — accessible brand ramp, warm surfaces,
           semantic contrast roles, an 8px spacing grid, and restrained depth.
   ======================================================================== */

:root {
  /* --- Brand orange --------------------------------------------------- */
  --c-primary: #f97316;
  --c-accent: #ea580c;

  --c-orange-50: #fff7ed;
  --c-orange-100: #ffedd5;
  --c-orange-200: #fed7aa;
  --c-orange-300: #fdba74;
  --c-orange-400: #fb923c;
  --c-orange-500: #f97316;
  --c-orange-600: #ea580c;
  --c-orange-700: #c2410c;
  --c-orange-800: #9a3412;
  --c-orange-900: #7c2d12;
  --c-orange-ink: #c2410c;

  /* --- Warm paper surfaces ------------------------------------------- */
  --c-bg: #fff9f4;
  --c-bg-tint: #fef3ea;
  --c-surface: #ffffff;
  --c-surface-2: #fffbf7;
  --c-surface-sunk: #fdf1e6;

  /* --- Deep neutral surfaces ----------------------------------------- */
  --c-deep: #191c21;
  --c-deep-2: #22262d;
  --c-deep-3: #2c313a;
  --c-deep-border: #3a4048;
  --c-deep-warm: #2b2118;

  /* --- Lines ---------------------------------------------------------- */
  --c-border: #f2e3d6;
  --c-border-strong: #e6cdb9;
  --c-border-orange: rgba(249, 115, 22, 0.34);

  /* --- Text ----------------------------------------------------------- */
  --c-ink: #1a1411;
  --c-ink-soft: #544b45;
  --c-ink-muted: #756a63;
  --c-on-primary: #1a1411;

  --c-on-deep: #ffffff;
  --c-on-deep-soft: #a1a1aa;
  --c-on-deep-faint: #8b9098;
  --c-on-deep-orange: #fdba74;

  /* --- Status --------------------------------------------------------- */
  --c-positive: #15803d;

  /* --- Glow and shadow depth ----------------------------------------- */
  --glow-primary: 0 0 0 1px rgba(249, 115, 22, 0.22),
                  0 0 28px -6px rgba(249, 115, 22, 0.5);
  --shadow-xs: 0 1px 2px rgba(124, 45, 18, 0.06);
  --shadow-sm: 0 2px 6px -2px rgba(124, 45, 18, 0.1);
  --shadow-md: 0 10px 24px -12px rgba(124, 45, 18, 0.18);
  --shadow-lg: 0 26px 60px -28px rgba(124, 45, 18, 0.28);
  --shadow-xl: 0 44px 90px -40px rgba(124, 45, 18, 0.36);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                 0 12px 30px -22px rgba(124, 45, 18, 0.32);

  /* --- Typography: doc families --------------------------------------- */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Modular scale anchored on the doc's display-lg 64px and body-md 16px. */
  --fs-display-xl: clamp(2.75rem, 6vw, 4.5rem);
  --fs-display-lg: clamp(2rem, 4.2vw, 3.25rem); /* 64px cap = doc display-lg */
  --fs-display-md: clamp(1.5rem, 2.5vw, 2rem);
  --fs-title: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem; /* doc body-md */
  --fs-body-sm: 0.9375rem;
  --fs-body-xs: 0.875rem;
  --fs-label-md: 0.75rem; /* doc label-md */
  --fs-label-sm: 0.6875rem;

  --lh-display: 1.04; /* doc */
  --lh-heading: 1.16;
  --lh-body: 1.6; /* doc */
  --lh-label: 1.2; /* doc */

  --ls-display: -0.022em;
  --ls-label: 0.14em;

  --fw-display: 500; /* doc display-lg */
  --fw-body: 400; /* doc body-md */
  --fw-label: 600; /* doc label-md */

  /* --- Spacing: doc 8px base ------------------------------------------ */
  --s-1: 0.5rem; /* 8  — base */
  --s-2: 1rem; /* 16 — gap */
  --s-3: 1.5rem; /* 24 — card padding */
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem; /* 80 — section padding */
  --s-12: 6rem;

  --card-pad: var(--s-3);
  --section-pad: clamp(3.5rem, 8vw, 5rem);
  --gutter: clamp(1.5rem, 4.5vw, 3.5rem);
  --measure: 1280px;
  --nav-h: 68px;

  /* --- Radii: doc ------------------------------------------------------ */
  --r-card: 8px;
  --r-control: 8px;
  --r-nested: 8px;
  --r-pill: 9999px;

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 720ms;
  /* One full lap of the card's perimeter trace. Slow enough to read as travel
     rather than a strobe on the short edges. */
  --t-trace: 2600ms;

  /* --- Layers --------------------------------------------------------- */
  --z-atmos: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-drawer: 60;
  --z-skip: 70;
}

/* Breakpoints, for reference in styles.css:
   sm 640  md 768  lg 1024  xl 1280  2xl 1536                                */