/* ============================================================================
   LOGPOSE V2 — Design Tokens (production clean)
   No legacy aliases. Modern CSS custom properties only.
   ============================================================================ */

:root[data-theme="dark"] {
  /* Foundation */
  --color-bg:          #081018;
  --color-surface:     #0D1B2A;
  --color-surface-2:   #112240;
  --color-surface-3:   #1A3352;
  --color-border:      #1E3A5F;
  --color-border-light: #2A4A6E;

  /* Text */
  --color-text:        #E8F0F8;
  --color-text-secondary: #8BAABD;
  --color-text-muted:  #5E7A8E;

  /* Brand */
  --color-baltic:      #2CC8FF;
  --color-amber:       #FFC857;
  --color-sea:         #18B87A;
  --color-danger:      #E74C3C;
  --color-warning:     #F0A500;
  --color-info:        #3498DB;

  /* Navigation */
  --color-nav-active:  #2CC8FF;
  --color-nav-inactive: #3A5A7A;

  /* Typography */
  --font-display:      "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:         "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:         "Space Grotesk Mono", "Cascadia Code", monospace;

  --text-xs:     9px;
  --text-sm:     11px;
  --text-body:   14px;
  --text-md:     16px;
  --text-lg:     18px;
  --text-xl:     24px;
  --text-2xl:    32px;
  --text-3xl:    42px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* Spacing */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* Touch */
  --touch-min: 44px;

  /* Radii */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow:      0 2px 10px rgba(2,8,16,0.5);
  --shadow-lg:   0 8px 30px rgba(2,8,16,0.6);
  --shadow-glow: 0 0 20px rgba(44,200,255,0.15);

  /* Glass */
  --glass-bg:     rgba(13,27,42,0.85);
  --glass-blur:   blur(18px) saturate(140%);
  --glass-border: rgba(44,200,255,0.08);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   80ms;
  --duration-normal: 180ms;
  --duration-slow:   300ms;

  /* Layout */
  --header-height:   56px;
  --bottom-nav-height: 64px;
  --max-content:    680px;
  --safe-inset-bottom: env(safe-area-inset-bottom, 0px);

  /* Z-index layers */
  --z-base:    1;
  --z-header:  100;
  --z-sheet:   200;
  --z-modal:   300;
  --z-toast:   400;
  --z-splash:  500;

  /* Icon sizing */
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;
  --icon-xl:  32px;
}

/* Light theme */
:root[data-theme="light"] {
  --color-bg:          #F0F4F8;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #F7FAFC;
  --color-surface-3:   #EDF2F7;
  --color-border:      #D0D8E0;
  --color-border-light: #E0E8F0;

  --color-text:        #0A1929;
  --color-text-secondary: #3D5A73;
  --color-text-muted:  #7B9AB0;

  --shadow-sm:   0 1px 3px rgba(10,25,41,0.06);
  --shadow:      0 2px 10px rgba(10,25,41,0.08);
  --shadow-lg:   0 8px 30px rgba(10,25,41,0.10);

  --glass-bg:     rgba(255,255,255,0.85);
  --glass-border: rgba(44,200,255,0.12);
}