/* ════════════════════════════════════════════════════════════════════
   KONOOS OS · tokens.css
   Foundations · refined for the bold iteration
   ════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark light;

  /* Brand */
  --k-brand-green:      #00CC22;
  --k-brand-green-deep: #00B050;
  --k-brand-blue:       #0081E2;
  --k-grad-h: linear-gradient(90deg,  #00CC22 0%, #00B050 54%, #0081E2 100%);
  --k-grad-v: linear-gradient(180deg, #00CC22 0%, #00B050 54%, #0081E2 100%);
  --k-grad-r: radial-gradient(circle at 30% 30%, #00CC22 0%, #00B050 50%, #0081E2 100%);
  --k-grad-soft: linear-gradient(135deg, rgba(0,204,34,0.16), rgba(0,129,226,0.16));

  /* Dark chrome */
  --k-c-bg-0:    #0A0A0B;
  --k-c-bg-1:    #121214;
  --k-c-bg-2:    #1A1A1D;
  --k-c-bg-3:    #222226;
  --k-c-bg-4:    #2A2A2F;
  --k-c-border:        rgba(255,255,255,0.07);
  --k-c-border-strong: rgba(255,255,255,0.14);
  --k-c-border-muted:  rgba(255,255,255,0.04);
  --k-c-fg:        #F2F2F4;
  --k-c-fg-muted:  #B5B5BB;
  --k-c-fg-subtle: #85858C;
  --k-c-fg-dim:    #80808A;  /* WCAG AA ≥4.5:1 sobre --k-c-bg-1 (timestamps/subs del rail) */
  --k-c-fg-ghost:  #3A3A40;

  /* Light workspace */
  --k-w-bg-0:    #F7F8FA;
  --k-w-bg-1:    #FFFFFF;
  --k-w-bg-2:    #F1F3F5;
  --k-w-bg-3:    #E8EBEE;
  --k-w-border:        rgba(15,23,42,0.09);
  --k-w-border-strong: rgba(15,23,42,0.18);
  --k-w-border-muted:  rgba(15,23,42,0.05);
  --k-w-fg:        #0A0A0B;
  --k-w-fg-muted:  #3A3A40;
  --k-w-fg-subtle: #5A5A62;
  --k-w-fg-dim:    #85858C;

  /* Status colors */
  --k-success: #00B050; --k-success-fg: #3DDB55; --k-success-bg: rgba(0,204,34,.12);
  --k-warning: #FFB020; --k-warning-fg: #FFC75A; --k-warning-bg: rgba(255,176,32,.12);
  --k-danger:  #FF4757; --k-danger-fg:  #FF6B7A; --k-danger-bg:  rgba(255,71,87,.12);
  --k-info:    #0081E2; --k-info-fg:    #3DA0EE; --k-info-bg:    rgba(0,129,226,.12);
  --k-purple:  #8B5CF6; --k-purple-fg:  #A78BFA; --k-purple-bg:  rgba(139,92,246,.12);

  /* Systems */
  --sys-back:  #FF8C42;
  --sys-mid:   #5A8AC9;
  --sys-front: #E26A9A;
  --sys-org:   #9B7FE0;
  --sys-loom:  #3FB950;
  --sys-noos:  var(--k-grad-h);

  /* Type */
  --k-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --k-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --k-fs-micro: 10px;
  --k-fs-label: 11px;
  --k-fs-meta:  12px;
  --k-fs-body:  13px;
  --k-fs-h3:    15px;
  --k-fs-h2:    18px;
  --k-fs-h1:    22px;
  --k-fs-display: 28px;

  --k-lh-tight: 1.25;
  --k-lh-base:  1.5;

  /* Space */
  --k-s-1: 4px;
  --k-s-2: 8px;
  --k-s-3: 12px;
  --k-s-4: 16px;
  --k-s-5: 20px;
  --k-s-6: 24px;
  --k-s-7: 32px;
  --k-s-8: 40px;

  /* Chrome */
  --k-header-h:    44px;
  --k-status-h:    28px;
  --k-rail-c:      56px;
  --k-rail-db-x:   320px;
  --k-rail-noos-x: 380px;

  --k-h-btn-sm: 26px;
  --k-h-btn:    30px;
  --k-h-btn-lg: 36px;
  --k-h-row:    32px;

  /* Radii */
  --k-r-1: 3px;
  --k-r-2: 5px;
  --k-r-3: 7px;
  --k-r-4: 10px;
  --k-r-5: 14px;
  --k-r-full: 999px;

  /* Elevation */
  --k-elev-1: 0 1px 2px rgba(0,0,0,.3);
  --k-elev-2: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --k-elev-3: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  --k-elev-4: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  --k-elev-w-1: 0 1px 2px rgba(15,23,42,.06);
  --k-elev-w-2: 0 4px 12px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
  --k-elev-w-3: 0 12px 32px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.06);

  /* Motion */
  --k-m-fast:   120ms;
  --k-m-base:   220ms;
  --k-m-slow:   420ms;
  --k-ease-std:  cubic-bezier(.4,0,.2,1);
  --k-ease-out:  cubic-bezier(0,0,.2,1);
  --k-ease-spring: cubic-bezier(.5,1.5,.5,1);

  /* Icons */
  --k-ic-xs: 12px;
  --k-ic-sm: 14px;
  --k-ic-md: 16px;
  --k-ic-lg: 18px;

  /* Z */
  --k-z-popover: 40;
  --k-z-tooltip: 50;
  --k-z-overlay: 80;
  --k-z-modal:   100;
  --k-z-lupa:    120;
  --k-z-tweaks:  130;
}

/* Density · compact */
:root[data-density="compact"] {
  --k-fs-label: 10px;
  --k-fs-meta:  11px;
  --k-fs-body:  12px;
  --k-fs-h3:    14px;
  --k-fs-h2:    16px;
  --k-fs-h1:    20px;
  --k-s-3: 10px;
  --k-s-4: 12px;
  --k-s-5: 16px;
  --k-s-6: 20px;
  --k-h-btn-sm: 24px;
  --k-h-btn:    28px;
  --k-h-row:    28px;
  --k-lh-base: 1.4;
  --k-header-h: 40px;
}

/* Density · comfortable */
:root[data-density="comfortable"] {
  --k-fs-label: 12px;
  --k-fs-meta:  13px;
  --k-fs-body:  14px;
  --k-fs-h3:    16px;
  --k-fs-h2:    20px;
  --k-fs-h1:    24px;
  --k-s-3: 14px;
  --k-s-4: 18px;
  --k-s-5: 24px;
  --k-s-6: 32px;
  --k-h-btn:    36px;
  --k-h-btn-lg: 44px;
  --k-h-row:    40px;
  --k-lh-base: 1.55;
  --k-header-h: 52px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}