/* ==========================
   DESIGN TOKENS
========================== */

:root {

  /* BRAND COLORS */
  --color-primary: #FB923C;      /* Main CTA / Brand */
  --color-secondary: #FFEDD5;    /* Soft background highlights */
  --color-accent: #8B5E3C;       /* Coffee brown */

  /* SURFACES */
  --color-bg: #FFFDF8;           /* Main page background */
  --color-surface: #FFFFFF;      /* Cards, sections */
  --color-muted: #F6E8D8;        /* Subtle containers */

  /* TEXT */
  --color-text: #3F2A1D;         /* Main text */
  --color-text-light: #7A5C47;   /* Secondary text */
  --color-text-dark: #2A1B12;    /* Headings */

  /* STATES */
  --color-hover: #F97316;        /* Primary hover */
  --color-active: #EA580C;       /* Primary active */

  --color-success: #22C55E;
  --color-warning: #FACC15;
  --color-danger: #EF4444;

  /* FONTS */
  --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* LAYOUT SYSTEM */
  --content-width: 1540px;
  --content-width-wide: 1680px;
  --section-spacing: clamp(3rem, 5vw, 5rem);
  --section-spacing-sm: clamp(1.5rem, 3vw, 2.5rem);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --border-soft: 1px solid rgba(63, 42, 29, 0.08);
  --shadow-card: 0 12px 30px rgba(63, 42, 29, 0.08);
  --shadow-hover: 0 18px 36px rgba(63, 42, 29, 0.12);

  /* BREAKPOINTS (reference only — CSS custom properties can't be used inside
     @media conditions, so every @media (max-width: ...) in this project must
     use one of these three literal values instead of an ad hoc number)
     Mobile:  480px
     Tablet:  768px
     Desktop: 1024px */
}