/*
 * WPOS Design Tokens v1
 * Source of truth: Figma file Qp3ff4RuhjL5xbfGcqUuoX, collection "WPOS Design Tokens".
 * Mode: Dark only (no light mode in v1 — admin.wpos.ai is dark-only per design spec).
 *
 * Token layers:
 *   1. Primitives  (color/primitive/*, space/*, radius/*)  — raw values
 *   2. Semantic    (color/surface/*, color/text/*, ...)    — meaning-based aliases
 *   3. Component   (added per-component as needed)         — not in this file
 *
 * In components prefer semantic tokens. Reach for primitives only when the
 * semantic layer doesn't carry the right meaning (rare).
 */

/* === Geist font (self-hosted, SIL OFL 1.1 — see css/fonts/OFL.txt) ============ */

@font-face {
  font-family: 'Geist';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Medium.woff2') format('woff2');
}

:root {
  /* === Color primitives ==================================================== */

  /* Gray scale (11 stops) */
  --color-primitive-gray-0:   #FFFFFF;
  --color-primitive-gray-50:  #D9D9D9;
  --color-primitive-gray-100: #AFAFAF;
  --color-primitive-gray-200: #9F9F9F;
  --color-primitive-gray-300: #797979;
  --color-primitive-gray-400: #575757;
  --color-primitive-gray-500: #252525;
  --color-primitive-gray-600: #222222;
  --color-primitive-gray-700: #1A1A1A;
  --color-primitive-gray-800: #171717;
  --color-primitive-gray-900: #0F0F0F;

  /* Accent */
  --color-primitive-accent-500: #1B2534;

  /* Status — green, orange, purple, amber */
  --color-primitive-green-300:  #86DA9A;
  --color-primitive-green-500:  #36864A;
  --color-primitive-green-900:  #253629;
  --color-primitive-orange-500: #936344;
  --color-primitive-purple-500: #8A38F5;
  --color-primitive-amber-300:  #F0C666;
  --color-primitive-amber-500:  #D89E2E;
  --color-primitive-amber-900:  #2E230E;

  /* Black */
  --color-primitive-black-0:  #000000;
  --color-primitive-black-40: rgba(0, 0, 0, 0.38);

  /* === Semantic — Surface tiers ============================================ */
  --color-surface-canvas:  var(--color-primitive-gray-900); /* page background */
  --color-surface-sunken:  var(--color-primitive-gray-800); /* inset / inner content */
  --color-surface-default: var(--color-primitive-gray-700); /* cards, panels default */
  --color-surface-raised:  var(--color-primitive-gray-600); /* raised / hovered */
  --color-surface-overlay: var(--color-primitive-gray-500); /* popovers, dropdowns, tooltips */
  --color-surface-active:  var(--color-primitive-accent-500); /* selected nav item, active */

  /* === Semantic — Text ===================================================== */
  --color-text-primary:   var(--color-primitive-gray-0);
  --color-text-secondary: var(--color-primitive-gray-50);
  --color-text-tertiary:  var(--color-primitive-gray-100);
  --color-text-muted:     var(--color-primitive-gray-200);
  --color-text-disabled:  var(--color-primitive-gray-300);
  --color-text-on-accent: var(--color-primitive-gray-0);

  /* === Semantic — Border =================================================== */
  --color-border-default: var(--color-primitive-gray-400);
  --color-border-subtle:  var(--color-primitive-gray-500);
  --color-border-active:  var(--color-primitive-accent-500);

  /* === Semantic — Status =================================================== */
  --color-status-success-fg:     var(--color-primitive-green-500);
  --color-status-success-bg:     var(--color-primitive-green-900);
  --color-status-success-accent: var(--color-primitive-green-300);

  --color-status-running-fg:     var(--color-primitive-orange-500);

  --color-status-warning-fg:     var(--color-primitive-amber-500);
  --color-status-warning-bg:     var(--color-primitive-amber-900);
  --color-status-warning-accent: var(--color-primitive-amber-300);
  --color-status-warning-dot:    var(--color-primitive-amber-500);

  --color-status-info-fg:        var(--color-primitive-purple-500);
  --color-status-info-dot:       var(--color-primitive-gray-100);

  /* === Semantic — Overlay ================================================== */
  --color-overlay-scrim: var(--color-primitive-black-40);

  /* === Spacing — 4pt grid + 2pt micro tier ================================= */
  --space-0:  0px;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 48px;
  --space-14: 56px;
  --space-15: 64px;

  /* === Radius =============================================================== */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-pill: 9999px;

  /* === Effects — shadows ==================================================== */
  /* Defined for future use (popovers, modals). Command Center v1 ships flat. */
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:          0 12px 48px rgba(0, 0, 0, 0.50);
  --shadow-focus-ring:  0 0 0 2px rgba(138, 56, 245, 0.40); /* purple/500 @ 40% */

  /* === Typography =========================================================== */
  --font-family-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/*
 * Global defaults.
 * Body uses Geist Medium (14/auto) per the design system default UI weight.
 * Page background uses surface/canvas; default text uses text/primary.
 */
html {
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  color-scheme: dark;
}

body {
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type scale helpers (use directly when needed, e.g. on headings/captions) */
.type-heading-md   { font-family: var(--font-family-sans); font-weight: 500; font-size: 16px; line-height: 24px; }
.type-heading-sm   { font-family: var(--font-family-sans); font-weight: 500; font-size: 15px; line-height: 24px; }
.type-body         { font-family: var(--font-family-sans); font-weight: 500; font-size: 14px; }
.type-body-regular { font-family: var(--font-family-sans); font-weight: 400; font-size: 14px; }
.type-body-small   { font-family: var(--font-family-sans); font-weight: 500; font-size: 13px; line-height: 16px; }
.type-caption      { font-family: var(--font-family-sans); font-weight: 500; font-size: 12px; }
.type-label        { font-family: var(--font-family-sans); font-weight: 500; font-size: 13px; line-height: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.type-micro        { font-family: var(--font-family-sans); font-weight: 500; font-size: 11px; line-height: 16px; }