/* ==========================================================================
   Viola — Design Tokens
   Layer 1: primitive (raw brand hex) → Layer 2: semantic (roles)
   → Layer 3: component (specific UI parts). Only this file may reference
   raw hex values; every other stylesheet consumes semantic/component tokens.

   Art direction: strict duotone — Viola purple ink (#7E3973) screen-printed
   on white paper. Every surface is white or a purple-family tint; the only
   "dark" is a deep plum, never gray/black.
   ========================================================================== */

:root {
  /* ---- Layer 1: Primitive palette ----
     2026-07-08: values snapped to the official Viola Design System
     (tokens/colors.css in the DS bundle) — same duotone, exact DS hexes. */
  --palette-purple-700: #7E3973; /* بنفش ویولا — brand ink, matches all SVG assets */
  --palette-purple-800: #5E2A56; /* DS purple-dark — pressed / emphasis */
  --palette-purple-500: #A05E96; /* DS purple-soft — hover tint, secondary accents */
  --palette-purple-400: #BD7CB5; /* site mid-tint (category accents), purple family */
  --palette-purple-200: #E9D9E6; /* DS lilac — chips, subtle fills */
  --palette-purple-150: #EBDFE9; /* DS border-subtle — hairline dividers */
  --palette-purple-100: #F6EEF4; /* DS blush — faintest tint fills */
  --palette-purple-050: #FAF3F9; /* یاس کم‌رنگ — alt sections */
  --palette-white: #FFFFFF;
  --palette-cream: #FDFBFC;      /* DS cream — off-white page background */
  --palette-plum-900: #46203F;   /* DS purple-deep — footer & dark surfaces */
  --palette-ink: #4A3546;        /* DS text-body — purple-leaning near-black */
  --palette-plum-700: #8B7387;   /* DS text-muted */

  /* ---- Layer 2: Semantic tokens ---- */
  --color-brand-primary: var(--palette-purple-700);
  --color-brand-secondary: var(--palette-purple-500);
  --color-brand-tertiary: var(--palette-purple-400);
  --color-brand-tint: var(--palette-purple-200);

  --color-surface: var(--palette-white);
  /* 2026-07-08: DS direction — page sits on cream, cards stay pure white */
  --color-surface-page: var(--palette-cream);
  --color-surface-alt: var(--palette-cream);
  --color-surface-tint: var(--palette-purple-100);
  --color-surface-dark: var(--palette-plum-900);

  --color-text: var(--palette-ink);
  --color-text-muted: var(--palette-plum-700);
  --color-text-inverse: var(--palette-white);
  --color-text-on-tint: var(--palette-plum-900);

  --color-border: var(--palette-purple-400);
  --color-border-soft: var(--palette-purple-150);

  --color-focus-ring: var(--palette-purple-500);

  /* Product-category accent mapping — single source of truth for color,
     the JS single source of truth for mascot/label lives in products-data.js */
  --category-big-cookie-accent: var(--palette-purple-700);
  --category-side-cookie-accent: var(--palette-purple-500);
  --category-bread-accent: var(--palette-purple-400);

  /* ---- Layer 3: Component tokens ---- */
  --button-bg: var(--color-brand-primary);
  /* DS interaction model: hover lightens, press darkens */
  --button-bg-hover: var(--palette-purple-500);
  --button-bg-active: var(--palette-purple-800);
  --button-text: var(--color-text-inverse);
  --button-outline-border: var(--color-brand-primary);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border-soft);
  --card-shadow: 0 6px 24px -12px rgba(126, 57, 115, 0.28);
  --card-shadow-hover: 0 22px 44px -16px rgba(126, 57, 115, 0.42);

  --header-bg: rgba(255, 255, 255, 0.88);
  --header-shadow: 0 2px 20px -8px rgba(126, 57, 115, 0.25);
  --nav-link-color: var(--color-text);
  --nav-link-active: var(--color-brand-primary);

  --footer-bg: var(--palette-plum-900);
  --footer-text: var(--palette-purple-200);

  --chip-bg: var(--palette-purple-100);
  --chip-text: var(--color-brand-primary);

  --loader-bg: var(--palette-cream);
  --loader-ink: var(--palette-purple-700);

  --pattern-url: url("../assets/images/pattern/pattern-bites.svg");

  /* ---- Typography ---- */
  --font-fa: "B Koodak", Tahoma, "Segoe UI", sans-serif;
  --font-fa-outline: "B Koodak Outline", "B Koodak", Tahoma, sans-serif;
  --font-en: "MV Boli", "Comic Sans MS", cursive, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: clamp(2.5rem, 5.2vw, 3.75rem);
  --fs-display: clamp(2.75rem, 6.5vw, 4.5rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;

  /* ---- Radius / shape ---- */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 34px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --header-height: 84px;

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo: smooth deceleration */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot for mascots */
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;
}