/* ==========================================================================
   CraftsBo — Design Tokens
   Premium minimalist fashion system: warm ink neutrals + brass gold accent,
   with seasonal accent tokens for collection theming.
   ========================================================================== */

:root {
  /* ---- Color: Core neutrals (warm, editorial) ---- */
  --color-ink: #1c1917;
  --color-ink-soft: #44403c;
  --color-fg: #100d0c;
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f1ed;
  --color-muted: #f1ede8;
  --color-muted-fg: #77716a;
  --color-border: #e6e1da;
  --color-border-strong: #d3ccc2;

  /* ---- Color: Brand accent (brass/gold) ---- */
  --color-gold: #a16207;
  --color-gold-soft: #c9a66b;
  --color-gold-bg: #f7f1e4;

  /* ---- Color: Semantic ---- */
  --color-destructive: #b3261e;
  --color-success: #2f6b4f;
  --color-ring: #1c1917;

  /* ---- Color: Seasonal collection accents ---- */
  --accent-bts: #2c4a6e;         /* Back to School — collegiate navy */
  --accent-bts-bg: #eef2f6;
  --accent-halloween: #a8460f;   /* Halloween — pumpkin ember */
  --accent-halloween-bg: #f8ede3;
  --accent-summer: #1e7f82;      /* Summer & Beach — lagoon teal */
  --accent-summer-bg: #eaf4f4;
  --accent-trending: #a16207;    /* Trending — signature gold */
  --accent-trending-bg: #f7f1e4;

  /* ---- Typography ---- */
  --font-display: 'Bodoni Moda', 'Georgia', serif;
  --font-body: 'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.375rem;     /* 22px */
  --text-xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
  --text-3xl: clamp(3rem, 2.3rem + 3vw, 4.75rem);
  --text-4xl: clamp(3.5rem, 2.4rem + 4.8vw, 6.5rem);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.22em;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---- Spacing scale (4/8pt rhythm) ---- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-12: 5rem;     /* 80 */
  --space-16: 6rem;     /* 96 */
  --space-20: 8rem;     /* 128 */

  /* ---- Radius ---- */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* ---- Shadow (used sparingly — flat by default) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 13, 12, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 13, 12, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 13, 12, 0.14);
  --shadow-gold: 0 8px 24px rgba(161, 98, 7, 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 420ms;
  --duration-page: 600ms;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-mobile-nav: 150;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (min-width: 768px) {
  :root { --header-h: 88px; }
}