/**
 * Design Tokens — Picklemall
 *
 * Single source of truth for all design values.
 * Naming convention: --pm-{category}-{variant}
 */

:root {
   /* ── Brand — Primary (teal) ──────────────────────────
       Scale: positive = darker, negative = lighter       */
   --pm-color-primary: #09605C;
   /* base              */
   --pm-color-primary-d80: #052E2C;
   /* +80 — darkest     */
   --pm-color-primary-d40: #063B38;
   /* +40 — dark        */
   --pm-color-primary-d20: #006ACC;
   /* +20               */
   --pm-color-primary-l20: #109E97;
   /* -20               */
   --pm-color-primary-l40: #17E6DB;
   /* -40               */
   --pm-color-primary-l60: #87F3EE;
   /* -60               */
   --pm-color-primary-l80: #FAFFFE;
   /* -80 — lightest    */

   /* ── Brand — Secondary ───────────────────────────── */
   --pm-color-secondary-coral: #ED6B52;
   --pm-color-secondary-mint: #63D6B0;
   --pm-color-secondary-purple: #8265A7;
   --pm-color-secondary-blue: #469CF3;

   /* ── Brand — Action ──────────────────────────────── */
   --pm-color-action: #E1FF2B;

   /* ── Base ────────────────────────────────────────── */
   --pm-color-light: #FAFAFA;
   --pm-color-dark: #1F2121;
   --pm-color-white: #FFFFFF;
   --pm-color-black: #111111;

   /* ── Neutrals ────────────────────────────────────── */
   --pm-color-gray-50: #F8F9FA;
   --pm-color-gray-100: #F1F3F5;
   --pm-color-gray-200: #E9ECEF;
   --pm-color-gray-300: #DEE2E6;
   --pm-color-gray-400: #CED4DA;
   --pm-color-gray-500: #ADB5BD;
   --pm-color-gray-600: #6C757D;
   --pm-color-gray-700: #495057;
   --pm-color-gray-800: #343A40;
   --pm-color-gray-900: #212529;

   /* ── Semantic ────────────────────────────────────── */
   --pm-color-success: var(--pm-color-primary);
   --pm-color-warning: var(--pm-color-action);
   --pm-color-error: var(--pm-color-secondary-coral);
   --pm-color-info: var(--pm-color-secondary-blue);

   /* ── Typography — font families ──────────────────── */
   --pm-font-header: 'A Love of Thunder', serif;
   --pm-font-graffiti: 'TheGraffitiFont', cursive;
   --pm-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --pm-font-caption: 'Sohne', 'Inter', system-ui, sans-serif;
   --pm-font-mono: 'JetBrains Mono', monospace;

   /* ── Typography — fluid type scale (390px → 1280px) ─
       Formula: clamp(mobile, y-intercept + slope·vw, desktop) */
   --pm-text-xxlarge: clamp(2.625rem, 1.529rem + 4.494vw, 5.125rem);
   /* 42→82px */
   --pm-text-xlarge: clamp(2.125rem, 1.358rem + 3.146vw, 3.875rem);
   /* 34→62px */
   --pm-text-large: clamp(1.75rem, 1.203rem + 2.247vw, 3rem);
   /* 28→48px */
   --pm-text-medium: clamp(1.5rem, 1.062rem + 1.798vw, 2.5rem);
   /* 24→40px */
   --pm-text-small: clamp(1.25rem, 1.031rem + 0.899vw, 1.75rem);
   /* 20→28px */
   --pm-text-xsmall: clamp(1.125rem, 0.961rem + 0.674vw, 1.5rem);
   /* 18→24px */
   --pm-text-subtitle: clamp(1.0625rem, 0.981rem + 0.337vw, 1.25rem);
   /* 17→20px */
   --pm-text-body: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);
   /* 16→18px */
   --pm-text-body-sm: clamp(0.875rem, 0.820rem + 0.225vw, 1rem);
   /* 14→16px */
   --pm-text-caption: clamp(0.75rem, 0.695rem + 0.225vw, 0.875rem);
   /* 12→14px */
   --pm-text-quote: clamp(1.375rem, 0.992rem + 1.573vw, 2.25rem);
   /* 22→36px */

   /* keep base alias for body default */
   --pm-text-base: var(--pm-text-body);

   /* ── Typography — weights ─────────────────────────── */
   --pm-weight-regular: 400;
   --pm-weight-medium: 500;
   --pm-weight-semibold: 600;
   --pm-weight-bold: 700;

   /* ── Typography — line heights ───────────────────── */
   --pm-leading-none: 1;
   --pm-leading-tight: 1.1;
   --pm-leading-snug: 1.2;
   --pm-leading-normal: 1.4;
   --pm-leading-body: 1.5;
   --pm-leading-loose: 1.6;

   /* ── Typography — colours ────────────────────────── */
   --pm-color-type-heading: var(--pm-color-dark);
   --pm-color-type-body: #333741;
   --pm-color-type-link: var(--pm-color-primary);

   /* ── Spacing ──────────────────────────────────────── */
   --pm-space-1: 0.25rem;
   --pm-space-2: 0.5rem;
   --pm-space-3: 0.75rem;
   --pm-space-4: 1rem;
   --pm-space-5: 1.25rem;
   --pm-space-6: 1.5rem;
   --pm-space-8: 2rem;
   --pm-space-10: 2.5rem;
   --pm-space-12: 3rem;
   --pm-space-16: 4rem;
   --pm-space-20: 5rem;
   --pm-space-24: 6rem;

   /* ── Layout ───────────────────────────────────────── */
   --pm-max-width: 1200px;
   --pm-gutter: clamp(1rem, 4vw, 2rem);
   --pm-section-gap: var(--pm-space-16);

   /* ── Border radius ────────────────────────────────── */
   --pm-radius-sm: 4px;
   --pm-radius-md: 8px;
   --pm-radius-lg: 16px;
   --pm-radius-xl: 24px;
   --pm-radius-full: 9999px;

   /* ── Shadows ──────────────────────────────────────── */
   --pm-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
   --pm-shadow-md: 0 4px 12px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);
   --pm-shadow-lg: 0 10px 30px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .08);

   /* ── Transitions ──────────────────────────────────── */
   --pm-ease: cubic-bezier(.4, 0, .2, 1);
   --pm-duration-fast: 150ms;
   --pm-duration-base: 250ms;
   --pm-duration-slow: 400ms;

   /* ── Z-index ──────────────────────────────────────── */
   --pm-z-base: 0;
   --pm-z-raised: 10;
   --pm-z-overlay: 100;
   --pm-z-modal: 200;
   --pm-z-toast: 300;
   --pm-z-header: 400;
}