/* ==========================================================================
   CRENOR DESIGN TOKENS
   Single source of truth for the visual system. Change values here and the
   entire site updates. Reuse this file as the starting point for any future
   Crenor-family project (Ctech Digital Group brand, other stores, etc.)
   ========================================================================== */

:root {
  /* ---- Color: Indigo & Brass, inspired by adire textile dye work ---- */
  --color-ink: #1B2A4A;        /* deep indigo — nav, footer, headings */
  --color-indigo: #33477A;     /* secondary indigo — links, hover states */
  --color-indigo-tint: #EAEEF6;/* pale indigo — subtle section backgrounds */
  --color-brass: #B8923F;      /* primary accent — CTAs, prices, focus */
  --color-brass-dark: #96762E; /* brass hover/active state */
  --color-brass-tint: #F6EDD9; /* pale brass — badges, highlights */
  --color-ivory: #FAF6ED;      /* page background */
  --color-paper: #FFFFFF;      /* card / surface background */
  --color-charcoal: #2A2622;   /* body text */
  --color-charcoal-soft: #6B6357; /* secondary/muted text */
  --color-clay: #A85C3B;       /* sparing use — sale badges, urgency only */
  --color-line: #E6DFCF;       /* hairline borders/dividers */
  --color-success: #3F7D4F;
  --color-error: #B3352B;

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Shape & shadow ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(27,42,74,0.06), 0 8px 24px rgba(27,42,74,0.06);
  --shadow-hover: 0 4px 8px rgba(27,42,74,0.08), 0 16px 32px rgba(27,42,74,0.10);

  --container-max: 1280px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}