/* ==========================================================================
   DESIGN TOKENS - INSIDE ART PROTOTYPE
   Strict Grayscale & 8px Modular Scale
   ========================================================================== */

:root {
  /* Color Palette - Strict Grayscale */
  --c-bg:        #ffffff;  /* Page background */
  --c-surface:   #f5f5f5;  /* Cards, panels, inputs, sub-bars */
  --c-surface-2: #ebebeb;  /* Hover surfaces, table zebra, secondary tabs */
  --c-surface-3: #e0e0e0;  /* Image placeholders, active indicators */
  --c-line:      #d4d4d4;  /* Borders, dividers */
  --c-line-2:    #8a8a8a;  /* Accent borders, form field active borders */
  --c-muted:     #6b6b6b;  /* Secondary / meta text (AA contrast >= 4.5:1) */
  --c-ink-2:     #3d3d3d;  /* High-emphasis secondary text */
  --c-ink:       #141414;  /* Body text, headlines */
  --c-black:     #000000;  /* Primary buttons, badges, maximum contrast */
  --c-invert:    #ffffff;  /* Text on dark/black backgrounds */

  /* Typography */
  --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Modular Type Scale (Inter, 8px grid) */
  --fs-xs:   13px; /* Absolute minimum: labels, badges, captions, microcopy */
  --fs-sm:   14px; /* Secondary labels, form hints, compact table text */
  --fs-nav:  15px; /* Navigation items floor */
  --fs-base: 16px; /* Standard body text */
  --fs-md:   18px; /* Sub-headings, highlighted numbers */
  --fs-lg:   20px; /* H4, card titles */
  --fs-xl:   24px; /* H3, section sub-headers */
  --fs-2xl:  32px; /* H2, major section titles */
  --fs-3xl:  40px; /* H1, page headlines */
  --fs-hero: 48px; /* Hero display titles */

  /* Line Heights */
  --lh-tight:  1.15; /* Hero and large display headlines */
  --lh-heading: 1.25; /* H1, H2, H3 */
  --lh-body:    1.5;  /* Paragraphs and readable copy */

  /* Spacing Grid (Multiples of 4px / 8px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout Containers */
  --container-max: 1280px;
  --container-pad: 24px;
  --header-height-top: 40px;
  --header-height-main: 72px;

  /* Component Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Transition timings (for states only, no decorative animation) */
  --t-fast: 0.15s ease;

  /* Z-indexes */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    1000;
}