:root {
  /* ============================================================
     ARCHEC "EDITORIAL WHITE" PALETTE (v3)
     ------------------------------------------------------------
     Sampled from the actual print collateral — the company
     letterhead and Profile 2025 cover. The brand identity is:
       - vibrant editorial purple (#3B2D8E) — the letterhead bar
       - vibrant brand yellow   (#F2C940) — the cover panel
       - white substrate (~85% of pixels)
       - magenta accent only inside the logo swoosh
     Token NAMES are preserved so existing rules keep cascading;
     only the hex values changed.
     paint-shop.css re-pins the original 2008 hot-pink + deep-
     violet swatches inside `body.theme-paper` so the Painters
     identity is untouched by this sweep.
     ============================================================ */

  /* "Violet" slot — vibrant brand purple from letterhead + cover */
  --violet-950: #261A6B;   /* deepest brand purple — footer bg, key anchor */
  --violet-900: #3B2D8E;   /* primary brand purple — headlines, accents */
  --violet-850: #4A3DA8;
  --violet-800: #5B50BC;
  --violet-700: #7468CC;
  --violet-600: #9085D9;

  /* "Magenta" slot — logo-swoosh accent, sparingly used */
  --magenta-700: #952A6B;
  --magenta-600: #C13F8A;
  --magenta-500: #D866A4;
  --magenta-400: #E893BD;

  /* Gold — vibrant brand yellow from profile cover panel */
  --gold-600: #D9B41C;
  --gold-500: #F2C940;     /* primary brand yellow */
  --gold-400: #F8D86B;
  --gold-300: #FBE599;

  /* Cobalt — logo-roof colour, rare accent */
  --cobalt-700: #1F3FA0;
  --cobalt-600: #3D5BC2;

  /* Ink — warm purple-tinted neutrals for text on white surfaces */
  --ink-950: #1A1430;
  --ink-900: #2A2342;
  --ink-700: #4D4566;
  --ink-500: #76708A;
  --ink-300: #B5B0C2;
  --ink-100: #E8E5EE;

  /* Surfaces */
  --paper: #FFFFFF;
  --cream-100: #F2EAD6;    /* paint-shop carve-out keeps this */
  --cream-50: #FAF6EE;     /* main-site alternation row */

  /* Gradients — soft and white-friendly, NOT dark blocks. The hero
     mesh is now a light wash on white→cream, with the yellow and
     magenta blobs as faint tints (the strong brand colour now lives
     in solid hero panels, not in the background mesh). */
  --grad-hero: radial-gradient(circle at 88% 18%, rgba(242, 201, 64, 0.25) 0%, transparent 45%),
               radial-gradient(circle at 12% 78%, rgba(193, 63, 138, 0.18) 0%, transparent 50%),
               linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 100%);
  --grad-purple: linear-gradient(135deg, var(--violet-950) 0%, var(--violet-800) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  --grad-swoosh: linear-gradient(90deg, var(--magenta-600) 0%, var(--violet-700) 100%);

  --font-display: "Archivo Black", "Impact", "Haettenschweiler", sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-104: 6.5rem;
  --fs-display: clamp(3rem, 9vw, 7.5rem);

  --lh-tight: 0.95;
  --lh-display: 1.02;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-caps: 0.14em;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-ribbon: 0 0 40px 40px;

  /* Shadows — softer/warmer base for a white-dominant site,
     biased toward the brand purple so cards lift cleanly. */
  --shadow-sm: 0 2px 6px rgba(38, 26, 107, 0.08);
  --shadow-md: 0 14px 40px -12px rgba(38, 26, 107, 0.18);
  --shadow-lg: 0 40px 80px -24px rgba(38, 26, 107, 0.22);
  --shadow-gold: 0 18px 40px -12px rgba(242, 201, 64, 0.45);
  --shadow-ribbon: 0 18px 28px -14px rgba(38, 26, 107, 0.30);

  --dur-fast: 160ms;
  --dur-med: 360ms;
  --dur-slow: 720ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --max-w-sm: 48rem;
  --max-w-md: 64rem;
  --max-w-lg: 76rem;
  --max-w-xl: 86rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --z-header: 50;
  --z-nav: 60;
  --z-modal: 80;
  --z-toast: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}