/* ═══════════════════════════════════════════
   TOKENS — Parallel Loop design system
   Source: Figma Brand Kitchen (node 101:215)
   Non-theme tokens only. Theme tokens in themes.css.
   ═══════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────
     BRAND PALETTE — raw colour values
     "Grey builds the system.
      Orange brings it to life."
     ───────────────────────────────────────── */

  /* Greys */
  --color-charcoal:   #494E54;
  --color-grey-700:   #5A5F66;
  --color-grey-600:   #676C72;
  --color-grey-500:   #858A90;
  --color-grey-400:   #9DA2A8;
  --color-grey-300:   #B7BCC2;
  --color-grey-200:   #CDCDCD;
  --color-grey-100:   #E6E6E6;
  --color-grey-50:    #F6F6F6;
  --color-white:      #FFFFFF;
  --color-black:      #1E2124;   /* soft black */
  --color-black-deep: #14171A;

  /* Orange scale */
  --color-orange-900: #D93B24;
  --color-orange-800: #FD2A0F;
  --color-orange-700: #FF5C46;   /* primary brand accent */
  --color-orange-500: #FF7D6B;
  --color-orange-300: #FFADA2;
  --color-orange-100: #FFE5E0;

  /* Extended cyan */
  --color-cyan-400:   #A1D5E2;
  --color-cyan-200:   #B5E9F6;

  /* Accent stays constant across themes */
  --accent:           var(--color-orange-700);
  --accent-hover:     var(--color-orange-800);
  --accent-soft:      var(--color-orange-300);

  /* ─────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
          'Segoe UI', sans-serif;

  --fs-display:   clamp(2.5rem, 5.2vw, 4.5rem);   /* 40–72 */
  --fs-h1:        clamp(2rem, 4vw, 3.25rem);      /* 32–52 */
  --fs-h2:        clamp(1.75rem, 3vw, 2.5rem);    /* 28–40 */
  --fs-h3:        clamp(1.25rem, 1.8vw, 1.5rem);  /* 20–24 */
  --fs-lg:        1.125rem;                       /* 18 */
  --fs-md:        1rem;                           /* 16 */
  --fs-sm:        0.875rem;                       /* 14 */
  --fs-xs:        0.75rem;                        /* 12 */

  --lh-tight:     1.1;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-body:     0;
  --tracking-wide:     0.10em;

  /* ─────────────────────────────────────────
     SPACING — 8pt grid
     ───────────────────────────────────────── */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-128: 128px;
  --sp-160: 160px;

  /* ─────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: 80px;
  /* Editorial grid max content width — the inner area between the two
     vertical frame borders never exceeds this; beyond it, the side
     margins grow to fill the viewport. */
  --content-max: 1280px;

  /* ─────────────────────────────────────────
     BORDERS & RADII
     ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────
     MOTION
     ───────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --dur-fast:  150ms;
  --dur-med:   320ms;
  --dur-slow:  600ms;

  /* ─────────────────────────────────────────
     ELEVATION
     ───────────────────────────────────────── */
  --shadow-soft:   0 10px 30px rgba(73, 78, 84, 0.10);
  --shadow-lift:   0 20px 60px rgba(73, 78, 84, 0.18);
}

/* Responsive container padding */
@media (max-width: 1024px) {
  :root { --container-pad: 40px; }
}

@media (max-width: 640px) {
  :root { --container-pad: 20px; }
}