/*!
 * CraftyWorth Design Tokens
 * ═══════════════════════════════════════════════════════
 * SINGLE SOURCE OF TRUTH — Edit here, updates everywhere.
 *
 * HOW TO USE:
 *   Change --cw-primary → every button, badge, link updates
 *   Change --cw-font-head → every heading updates
 *   Change --cw-radius-card → every card corner updates
 *
 * BREAKPOINTS (use in media queries):
 *   Mobile:  max-width 768px
 *   Tablet:  max-width 1024px
 *   Desktop: min-width 1025px
 * ═══════════════════════════════════════════════════════
 */

:root {

  /* ── BRAND COLORS ─────────────────────────────────── */
  --cw-primary:        #A0293E;   /* Main brand — buttons, links, accents */
  --cw-primary-dark:   #7A1E2F;   /* Hover state */
  --cw-primary-light:  #FCEEF1;   /* Light tint — backgrounds */
  --cw-accent:         #C54E0F;   /* Secondary accent — #C54E0F passes WCAG 4.63:1 white text (was #E8651A = 3.27 fail) */
  --cw-accent-dark:    #A0380A;
  --cw-accent-light:   #FEF0E6;

  /* ── SURFACE COLORS ──────────────────────────────── */
  --cw-bg:             #FFFFFF;
  --cw-surface:        #FEF7F0;   /* Cards, off-white */
  --cw-surface-2:      #F8FAFC;   /* Lighter surface */

  /* ── TEXT COLORS ─────────────────────────────────── */
  --cw-ink:            #1A1208;   /* Primary text */
  --cw-ink-2:          #3D2E20;   /* Secondary text */
  --cw-ink-3:          #7A6458;   /* Muted/placeholder */
  --cw-ink-4:          #A89080;   /* Very muted */

  /* ── BORDER ──────────────────────────────────────── */
  --cw-line:           #EAD9CC;   /* Default border */
  --cw-line-soft:      #F3EAE3;   /* Subtle border */

  /* ── SEMANTIC STATES ─────────────────────────────── */
  --cw-success:        #166534;
  --cw-success-bg:     #F0FDF4;
  --cw-warning:        #92400E;
  --cw-warning-bg:     #FEF3C7;
  --cw-error:          #991B1B;
  --cw-error-bg:       #FEE2E2;
  --cw-info:           #1E40AF;
  --cw-info-bg:        #EFF6FF;

  /* ── TYPOGRAPHY ──────────────────────────────────── */
  --cw-font-head:      'Fraunces', Georgia, serif;
  --cw-font-body:      'Manrope', system-ui, sans-serif;
  --cw-font-mono:      'Fira Code', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --cw-text-xs:        clamp(10px, 1.2vw, 11px);
  --cw-text-sm:        clamp(11px, 1.4vw, 13px);
  --cw-text-base:      clamp(13px, 1.6vw, 15px);
  --cw-text-md:        clamp(15px, 1.8vw, 17px);
  --cw-text-lg:        clamp(17px, 2.2vw, 20px);
  --cw-text-xl:        clamp(20px, 2.8vw, 24px);
  --cw-text-2xl:       clamp(24px, 3.5vw, 30px);
  --cw-text-3xl:       clamp(28px, 4.5vw, 40px);
  --cw-text-4xl:       clamp(36px, 5.5vw, 56px);

  --cw-leading-tight:  1.15;
  --cw-leading-snug:   1.35;
  --cw-leading-normal: 1.6;
  --cw-leading-loose:  1.8;

  --cw-weight-normal:  400;
  --cw-weight-medium:  500;
  --cw-weight-semibold: 600;
  --cw-weight-bold:    700;
  --cw-weight-black:   800;

  /* ── SPACING ─────────────────────────────────────── */
  --cw-space-1:  clamp(2px,  0.3vw, 4px);
  --cw-space-2:  clamp(4px,  0.5vw, 6px);
  --cw-space-3:  clamp(6px,  0.8vw, 8px);
  --cw-space-4:  clamp(8px,  1vw,   12px);
  --cw-space-5:  clamp(12px, 1.5vw, 16px);
  --cw-space-6:  clamp(16px, 2vw,   20px);
  --cw-space-8:  clamp(20px, 2.5vw, 28px);
  --cw-space-10: clamp(28px, 3.5vw, 40px);
  --cw-space-12: clamp(36px, 4.5vw, 52px);
  --cw-space-16: clamp(48px, 6vw,   72px);
  --cw-space-20: clamp(60px, 8vw,   96px);

  /* ── LAYOUT ──────────────────────────────────────── */
  --cw-container-xs:   560px;
  --cw-container-sm:   760px;
  --cw-container-md:   1100px;
  --cw-container-lg:   1320px;
  --cw-container-xl:   1600px;
  --cw-gutter:         clamp(14px, 3vw, 40px);

  /* ── BORDER RADIUS ───────────────────────────────── */
  --cw-radius-xs:      4px;
  --cw-radius-sm:      6px;
  --cw-radius-md:      10px;
  --cw-radius-lg:      14px;
  --cw-radius-xl:      20px;
  --cw-radius-2xl:     28px;
  --cw-radius-full:    999px;
  --cw-radius-card:    var(--cw-radius-lg);
  --cw-radius-btn:     var(--cw-radius-full);

  /* ── SHADOW ──────────────────────────────────────── */
  --cw-shadow-xs:   0 1px 2px rgba(0,0,0,.06);
  --cw-shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --cw-shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --cw-shadow-lg:   0 8px 30px rgba(0,0,0,.12);
  --cw-shadow-xl:   0 16px 48px rgba(0,0,0,.14);
  --cw-shadow-card: 0 4px 20px -4px rgba(160,41,62,.12);
  --cw-shadow-btn:  0 4px 14px rgba(160,41,62,.30);

  /* ── ANIMATION ───────────────────────────────────── */
  --cw-dur-fast:   120ms;
  --cw-dur-base:   200ms;
  --cw-dur-slow:   350ms;
  --cw-ease:       cubic-bezier(.4,0,.2,1);
  --cw-ease-in:    cubic-bezier(.4,0,1,1);
  --cw-ease-out:   cubic-bezier(0,0,.2,1);
  --cw-ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ── Z-INDEX SCALE ───────────────────────────────── */
  --cw-z-base:     1;
  --cw-z-dropdown: 100;
  --cw-z-sticky:   200;
  --cw-z-fixed:    300;
  --cw-z-overlay:  400;
  --cw-z-modal:    500;
  --cw-z-toast:    600;
  --cw-z-top:      9999;

  /* ── LEGACY ALIASES (keep backward compat) ────────── */
  --p:       var(--cw-primary);
  --p-d:     var(--cw-primary-dark);
  --p-l:     var(--cw-primary-light);
  --a:       var(--cw-accent);
  --a-d:     var(--cw-accent-dark);
  --white:   var(--cw-bg);
  --off:     var(--cw-surface);
  --ink:     var(--cw-ink);
  --ink-2:   var(--cw-ink-2);
  --ink-3:   var(--cw-ink-3);
  --line:    var(--cw-line);
  --line-soft: var(--cw-line-soft);
  --head:    var(--cw-font-head);
  --body:    var(--cw-font-body);
}