/* 
 * Design Token System for AdminHub
 * Implements Section 3.A of docs/ARCHITECTURE.md
 * Warm, premium editorial color palette and 4px spacing grid.
 */

:root {
  /* Core Colors */
  --gw-brand-600:    #f84c55;  /* Primary theme brand crimson */
  --gw-brand-700:    #e0353f;  /* Brand crimson active / deep */
  --gw-brand-500:    #ff646d;  /* Brand crimson hover / bright */
  --gw-brand-soft:   rgba(248, 76, 85, 0.12); /* Soft crimson tag & badge background */
  --gw-brand-glow:   rgba(248, 76, 85, 0.25); /* Focus ring / shadow */

  --gw-ink-900:      #111111;  /* Primary title color */
  --gw-ink-700:      #2d2a26;  /* High-contrast body text */
  --gw-ink-500:      #646059;  /* Secondary / supporting text */
  --gw-ink-300:      #9c978e;  /* Muted placeholder / disabled text */
  --gw-ink-100:      #dedad4;  /* Subtle backgrounds / borders */

  --gw-surface:      #FFFFFF;  /* Main card background */
  --gw-surface-hover:#FAF8F5;  /* Subtle surface hover state */
  --gw-surface-2:    #F0ECE7;  /* Elevated layout shading / page background */
  --gw-surface-3:    #E5E0DA;  /* Secondary control shading */

  --gw-line:         #E2DDD4;  /* Borders and dividers */
  --gw-line-hover:   #CFCAC0;  /* Stronger borders on hover */

  /* Semantic Feedback Colors */
  --gw-success:      #16a34a;
  --gw-success-soft: rgba(22, 163, 74, 0.12);
  --gw-danger:       #ef4444;
  --gw-danger-soft:  rgba(239, 68, 68, 0.12);

  /* Spacing Grid (4px multiples) */
  --gw-space-1:      0.25rem;   /* 4px */
  --gw-space-2:      0.5rem;    /* 8px */
  --gw-space-3:      0.75rem;   /* 12px */
  --gw-space-4:      1rem;      /* 16px */
  --gw-space-5:      1.25rem;   /* 20px */
  --gw-space-6:      1.5rem;    /* 24px */
  --gw-space-8:      2rem;      /* 32px */
  --gw-space-10:     2.5rem;    /* 40px */
  --gw-space-12:     3rem;      /* 48px */

  /* Radii */
  --gw-radius-sm:    4px;
  --gw-radius-md:    6px;
  --gw-radius-lg:    12px;
  --gw-radius-xl:    16px;
  --gw-radius-full:  9999px;

  /* Shadows (Warm editorial tone) */
  --gw-shadow-xs:    0 1px 2px rgba(17, 17, 17, 0.05);
  --gw-shadow-sm:    0 2px 6px rgba(17, 17, 17, 0.05), 0 1px 2px rgba(17, 17, 17, 0.04);
  --gw-shadow-md:    0 10px 25px -3px rgba(17, 17, 17, 0.08), 0 4px 10px -2px rgba(17, 17, 17, 0.04);
  --gw-shadow-lg:    0 20px 45px -10px rgba(17, 17, 17, 0.14), 0 8px 18px -4px rgba(17, 17, 17, 0.06);

  /* Micro-Animations & Timing */
  --gw-duration-xs:  100ms;
  --gw-duration-sm:  150ms;
  --gw-duration-md:  250ms;
  --gw-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --gw-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --gw-font-main:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}