/* ============================================================
   tokens.css — Universal Design Token System v3.0
   ============================================================
   Single source of truth for every visual decision.
   Production-ready. Import this file first, then build on top.
   
   Structure:
     1. Color Primitives (neutral scale + accent + status)
     2. Semantic Colors (surfaces, text, borders)
     3. Interactive States (CTA, secondary, destructive, ghost)
     4. Status Variants (semantic: success, warning, error, info)
     5. Disabled States
     6. Typography
     7. Spacing (4px base grid)
     8. Geometry (radius, shadows, borders, elevation)
     9. Motion & Transitions
    10. Z-Index Scale
    11. Focus & Accessibility
    12. Size Scale (sm, md, lg)
    13. Containers
   ============================================================ */

:root {

  /* ==========================================================
     1. COLOR PRIMITIVES
     ========================================================== */

  /* Neutrals (warm-tinted, auto-derived from page background) */
  --gray-50:  #FAFAF9;
  --gray-100: #F5F3F1;
  --gray-200: #EBE5E2;
  --gray-300: #D6D0CD;
  --gray-400: #B5AFAC;
  --gray-500: #9B9B9B;
  --gray-600: #706D6C;
  --gray-700: #524F4E;
  --gray-800: #343132;
  --gray-900: #1C1A1B;

  /* Brand / Accent (auto-derived: 100 = tint, 500 = base, 700 = shade) */
  --accent-500: #7263FF;   --accent-100: #EEEAFD;   --accent-700: #5A4DD4;

  /* Status Primitives (auto-derived from base 500) */
  --blue-500:   #00B4FF;   --blue-100:   #E4F4FD;   --blue-700:   #0090CC;
  --green-500:  #00C461;   --green-100:  #E8F7EC;   --green-700:  #00994D;
  --yellow-500: #FFB905;   --yellow-100: #FFF8EB;   --yellow-700: #CC9400;
  --red-500:    #FF564A;   --red-100:    #FDF3F4;   --red-700:    #D63A30;

  /* ==========================================================
     2. SEMANTIC COLORS
     ========================================================== */

  /* Surfaces */
  --color-page-bg:        var(--gray-200);
  --color-surface:        var(--gray-100);
  --color-surface-raised: var(--gray-50);
  --color-surface-sunken: var(--gray-300);
  --color-overlay:        rgba(28, 26, 27, 0.45);

  /* Text — hierarchy: text > muted > subtle > disabled */
  --color-text:          var(--gray-800);
  --color-text-muted:    var(--gray-500);
  --color-text-subtle:   var(--gray-400);
  --color-text-disabled: var(--gray-400);
  --color-text-invert:   var(--gray-50);

  /* Borders — scale: light < default < strong */
  --color-border:        var(--gray-300);
  --color-border-light:  var(--gray-200);
  --color-border-strong: var(--gray-400);
  --color-border-focus:  var(--accent-500);

  /* ==========================================================
     3. INTERACTIVE STATES
     ========================================================== */

  /* Primary (CTA) — default / hover / active / disabled */
  --cta-bg:           var(--accent-100);
  --cta-fg:           var(--accent-500);
  --cta-hover-bg:     var(--accent-500);
  --cta-hover-fg:     var(--gray-50);
  --cta-active-bg:    var(--accent-700);
  --cta-active-fg:    var(--gray-50);
  --cta-disabled-bg:  var(--gray-200);
  --cta-disabled-fg:  var(--gray-400);

  /* Secondary — default / hover / active / disabled */
  --secondary-bg:           var(--gray-100);
  --secondary-fg:           var(--gray-800);
  --secondary-hover-bg:     var(--gray-300);
  --secondary-hover-fg:     var(--gray-800);
  --secondary-active-bg:    var(--gray-400);
  --secondary-active-fg:    var(--gray-900);
  --secondary-disabled-bg:  var(--gray-200);
  --secondary-disabled-fg:  var(--gray-400);

  /* Destructive — default / hover / active / disabled */
  --destructive-bg:           var(--red-100);
  --destructive-fg:           var(--red-500);
  --destructive-hover-bg:     var(--red-500);
  --destructive-hover-fg:     var(--gray-50);
  --destructive-active-bg:    var(--red-700);
  --destructive-active-fg:    var(--gray-50);
  --destructive-disabled-bg:  var(--gray-200);
  --destructive-disabled-fg:  var(--gray-400);

  /* Ghost — default / hover / active / disabled */
  --ghost-bg:           transparent;
  --ghost-fg:           var(--gray-600);
  --ghost-hover-bg:     var(--gray-200);
  --ghost-hover-fg:     var(--gray-800);
  --ghost-active-bg:    var(--gray-300);
  --ghost-active-fg:    var(--gray-900);
  --ghost-disabled-bg:  transparent;
  --ghost-disabled-fg:  var(--gray-400);

  /* Interactive surface (for table row hover, list hover etc.) */
  --color-hover-surface: var(--gray-100);

  /* ==========================================================
     4. STATUS VARIANTS (semantic naming)
     ========================================================== */

  /* Info */
  --color-info:         var(--blue-500);
  --color-info-soft:    var(--blue-100);
  --status-info-bg:     var(--blue-100);
  --status-info-fg:     var(--blue-500);

  /* Success */
  --color-success:      var(--green-500);
  --color-success-soft: var(--green-100);
  --status-success-bg:  var(--green-100);
  --status-success-fg:  var(--green-500);

  /* Warning */
  --color-warning:      var(--yellow-500);
  --color-warning-soft: var(--yellow-100);
  --status-warning-bg:  var(--yellow-100);
  --status-warning-fg:  var(--yellow-500);

  /* Error */
  --color-error:        var(--red-500);
  --color-error-soft:   var(--red-100);
  --status-error-bg:    var(--red-100);
  --status-error-fg:    var(--red-500);

  /* Accent (brand status) */
  --status-accent-bg:   var(--accent-100);
  --status-accent-fg:   var(--accent-500);

  /* Neutral status */
  --status-neutral-bg:  var(--gray-200);
  --status-neutral-fg:  var(--gray-700);

  /* ==========================================================
     5. DISABLED STATES (global)
     ========================================================== */

  --disabled-bg:      var(--gray-200);
  --disabled-fg:      var(--gray-400);
  --disabled-border:  var(--gray-300);
  --disabled-opacity: 0.5;

  /* ==========================================================
     6. TYPOGRAPHY
     ========================================================== */

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Scale (modular — ~1.25 ratio) */
  --text-xs:      0.75rem;   /* 12px */
  --text-sm:      0.875rem;  /* 14px */
  --text-base:    1rem;      /* 16px */
  --text-lg:      1.125rem;  /* 18px */
  --text-xl:      1.25rem;   /* 20px */
  --text-2xl:     1.5rem;    /* 24px */
  --text-3xl:     2rem;      /* 32px */
  --text-4xl:     2.5rem;    /* 40px */
  --text-5xl:     3.5rem;    /* 56px */

  /* Line-heights */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-heavy:  800;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ==========================================================
     7. SPACING (4px base grid system)
     ========================================================== */

  --space-0:  0px;
  --space-px: 1px;
  --space-1:  4px;    /* 1 unit */
  --space-2:  8px;    /* 2 units */
  --space-3:  12px;   /* 3 units */
  --space-4:  16px;   /* 4 units */
  --space-5:  20px;   /* 5 units */
  --space-6:  24px;   /* 6 units */
  --space-8:  32px;   /* 8 units */
  --space-10: 40px;   /* 10 units */
  --space-12: 48px;   /* 12 units */
  --space-16: 64px;   /* 16 units */
  --space-20: 80px;   /* 20 units */

  /* ==========================================================
     8. GEOMETRY
     ========================================================== */

  /* Border-radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* Border widths */
  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  3px;

  /* Composed borders */
  --border-thin:   var(--border-width-thin) solid var(--color-border);
  --border-light:  var(--border-width-thin) solid var(--color-border-light);
  --border-strong: var(--border-width-thin) solid var(--color-border-strong);

  /* Card borders */
  --card-border-width: 1px;
  --card-border-color: var(--color-border);

  /* Shadows (raw) */
  --shadow-xs:  0 1px 2px rgba(52,49,50,0.05);
  --shadow-sm:  0 2px 6px rgba(52,49,50,0.07);
  --shadow-md:  0 4px 12px rgba(52,49,50,0.08);
  --shadow-lg:  0 10px 30px rgba(52,49,50,0.10);
  --shadow-xl:  0 20px 40px rgba(52,49,50,0.12);

  /* Semantic elevation (maps to shadows) */
  --elevation-0: none;                      /* flush   — flat cards, sunken */
  --elevation-1: var(--shadow-xs);          /* resting — default cards      */
  --elevation-2: var(--shadow-sm);          /* raised  — raised cards       */
  --elevation-3: var(--shadow-md);          /* hover   — card hover         */
  --elevation-4: var(--shadow-lg);          /* overlay — dropdowns, popover */
  --elevation-5: var(--shadow-xl);          /* modal   — dialogs, modals    */

  /* ==========================================================
     9. MOTION & TRANSITIONS
     ========================================================== */

  --duration-instant: 0ms;
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

  --transition-colors:    color var(--duration-normal) var(--ease-default),
                          background-color var(--duration-normal) var(--ease-default),
                          border-color var(--duration-normal) var(--ease-default);
  --transition-opacity:   opacity var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-default);
  --transition-all:       all var(--duration-normal) var(--ease-default);

  /* ==========================================================
     10. Z-INDEX SCALE
     ========================================================== */

  /* Usage hierarchy (enforced):
     base    → default content flow
     raised  → sticky elements, cards on hover
     dropdown→ dropdowns, popovers, select menus
     sticky  → sticky headers, sidebars
     overlay → overlay backdrop
     modal   → modal dialogs
     toast   → toast notifications (always on top) */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ==========================================================
     11. FOCUS & ACCESSIBILITY
     ========================================================== */

  --focus-ring:       0 0 0 2px var(--accent-500);
  --focus-ring-inset: inset 0 0 0 2px var(--accent-500);
  --focus-ring-error: 0 0 0 2px var(--color-error);

  /* ==========================================================
     12. SIZE SCALE (component sizing: sm, md, lg)
     ========================================================== */

  --size-sm:  32px;   /* compact buttons, inputs */
  --size-md:  44px;   /* default buttons, inputs (touch target) */
  --size-lg:  52px;   /* large buttons, inputs  */

  --size-input-h:  var(--size-md);
  --size-btn-h:    var(--size-md);
  --size-icon-sm:  16px;
  --size-icon:     20px;
  --size-icon-lg:  24px;
  --size-avatar-sm: 28px;
  --size-avatar:    40px;
  --size-avatar-lg: 56px;

  /* ==========================================================
     13. CONTAINERS
     ========================================================== */

  --size-container-sm: 640px;
  --size-container-md: 768px;
  --size-container-lg: 1024px;
  --size-container-xl: 1280px;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

html {
  font-size: 16px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
input, textarea, select { font: inherit; }

/* Focus-visible for keyboard navigation only */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:focus:not(:focus-visible) {
  outline: none;
}