/* ============================================================================
   GTrack v3 — Design System foundation (SSOT)
   Fresh frontend build. Reproduces knowledge/design/DESIGN_SYSTEM.md EXACTLY.
   This file is the single source of truth for design tokens + base reset.
   Per-page and per-component styles live in their own files / <style> blocks
   and consume these tokens. No Tabler, no style-enforcer.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS  (DESIGN_SYSTEM.md — the only place raw values are defined)
   ---------------------------------------------------------------------------- */
:root {
  /* Neutrals (§2) */
  --v3-bg-page:        #070809;   /* page behind frames */
  --v3-bg-panel:       #0b0c0d;   /* app frame, table area */
  --v3-bg-card:        #0c0d0f;   /* section cards, stage boxes */
  --v3-bg-video:       #060708;   /* player */
  --v3-bg-letterbox:   #0a0b0c;
  --v3-surface-frosted: rgba(255, 255, 255, 0.022); /* sidebar, header bars */
  --v3-surface-faint:   rgba(255, 255, 255, 0.012); /* header strips */

  /* Text (§2) */
  --v3-text-primary:     #e7e9ec;
  --v3-text-body:        #c4c9cf;
  --v3-text-body-2:      #bcc1c8;
  --v3-text-mono:        #cdd2d8;
  --v3-text-mono-2:      #d2d6db;
  --v3-text-secondary:   #9aa0a8;
  --v3-text-secondary-2: #828993;
  --v3-text-tertiary:    #6e747c;
  --v3-text-disabled:    #5c636c;
  --v3-text-disabled-2:  #565c64;
  --v3-text-ghost:       #474c54;
  --v3-text-label:       #7c828b;  /* field labels */

  /* Borders & hovers (§2) */
  --v3-border-panel:   rgba(255, 255, 255, 0.07);
  --v3-border-frame:   rgba(255, 255, 255, 0.08);
  --v3-border-row:     rgba(255, 255, 255, 0.05);
  --v3-border-input:   rgba(255, 255, 255, 0.09);
  --v3-border-overlay: rgba(255, 255, 255, 0.10);
  --v3-hover-row:      rgba(255, 255, 255, 0.03);
  --v3-hover-item:     rgba(255, 255, 255, 0.055);
  --v3-col-rule:       rgba(255, 255, 255, 0.07);

  /* ------------------------------------------------------------------ *
   *  ACCENT — single source of truth (see knowledge/design/LATEST_UPDATES.md).
   *  Switch the WHOLE studio between GTrack steel and Glimpse mint by
   *  flipping ONLY these two values:
   *      --v3-accent      : #46d9b6
   *      --v3-accent-rgb  :  70, 217, 182
   *  hover, focus and every tint below derive from them automatically.
   * ------------------------------------------------------------------ */
  --v3-accent:       #46d9b6;         /* Glimpse mint — GTrack steel = #9db4cc      */
  --v3-accent-rgb:   70, 217, 182;    /* same colour as R,G,B — steel = 157,180,204 */
  --v3-accent-ink:   #0a0f14;         /* text/icon that sits ON a filled accent    */
  --v3-accent-hover: color-mix(in srgb, var(--v3-accent) 80%, #ffffff); /* derived */
  --v3-accent-focus: rgba(var(--v3-accent-rgb), 0.55);                  /* derived */

  /* Danger (§2) */
  --v3-danger:       #c2796b;
  --v3-danger-rgb:   194, 121, 107;
  --v3-danger-hover: #cc8576;
  --v3-danger-ink:   #1a0f0d;

  /* Status — Treatment A base colors (§3) */
  --v3-status-not-started: #8a97ab;
  --v3-status-in-progress: #e3a64a;
  --v3-status-finished:    #4f9e76;
  --v3-status-approved:    #5fc24a;
  --v3-status-not-needed:  #5b616b;

  /* Type (§1) */
  --v3-font-ui:   'Hanken Grotesk', system-ui, sans-serif;
  --v3-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radius (§4) */
  --v3-radius-frame:   12px;
  --v3-radius-card:    11px;
  --v3-radius-overlay: 12px;
  --v3-radius-control: 9px;
  --v3-radius-icon:    7px;
  --v3-radius-chip:    6px;

  /* Shadow (§5) — soft, near-flat; never glow */
  --v3-shadow-frame:   0 18px 50px -42px rgba(0, 0, 0, 0.7);
  --v3-shadow-overlay: 0 20px 46px -14px rgba(0, 0, 0, 0.78);
  --v3-shadow-modal:   0 28px 60px -20px rgba(0, 0, 0, 0.85);
  --v3-shadow-toast:   0 18px 44px -16px rgba(0, 0, 0, 0.78);
}

/* ----------------------------------------------------------------------------
   2. RESET
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--v3-bg-page);
  color: var(--v3-text-body);
  font-family: var(--v3-font-ui);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------------------
   3. HELPERS
   ---------------------------------------------------------------------------- */
.v3-mono { font-family: var(--v3-font-mono); }

/* Brand mark — glimpse-logo tinted to accent via mask (DESIGN_SYSTEM §8) */
.v3-logo {
  display: inline-block;
  background: var(--v3-accent);
  -webkit-mask: url('../glimpse-logo.png') left center / contain no-repeat;
          mask: url('../glimpse-logo.png') left center / contain no-repeat;
}

/* Scrollbars (thin, steel) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }
::-webkit-scrollbar-track { background: transparent; }