/* ============================================================================
   Vantage UI — Design Tokens & Core Components
   ----------------------------------------------------------------------------
   Portable, framework-agnostic stylesheet. No build step, no dependencies.
   Drop into any project (vanilla, React, Vue, Antigravity, etc.).

   Character: warm-neutral, restrained, hairline borders, no drop shadows,
   no gradients. Reads like a well-printed reference document, not a SaaS UI.

   Theming: every value is a CSS custom property. Light is the :root default;
   [data-theme="dark"] re-themes the whole app with zero component edits.
   Components MUST read var(--color-*) — never inline hex, never #fff/#000.

   Source of truth: derived from DS-001 v2.0 / v2.1 / v2.2.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. LIGHT PALETTE (default)
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces — warm off-white, never pure white */
  --color-background-primary:   #FCFBF9;  /* main canvas */
  --color-background-secondary: #F4F1EC;  /* cards, panels, code blocks */
  --color-background-tertiary:  #ECE8E1;  /* table headers, header bars */
  --color-background-info:      #EAF2FA;  /* info callouts */

  /* Text */
  --color-text-primary:   #1F1B16;  /* body, headings */
  --color-text-secondary: #6B635A;  /* subtitles, metadata */
  --color-text-tertiary:  #9C9489;  /* captions, timestamps */
  --color-text-info:      #185FA5;  /* links */

  /* Borders — hairline only */
  --color-border-primary:   #C2BAB0;  /* card outlines, outer frames */
  --color-border-secondary: #D8D2C8;  /* inter-row dividers */
  --color-border-tertiary:  #E6E1D8;  /* subtle separators, hairlines */

  /* Domain accents — leading edges, low-saturation tags, active states only.
     Never body text, never wide surfaces. Rename freely per project. */
  --color-source:           #2D7F46;  /* moss green   */
  --color-source-surface:   #E5EFE5;
  --color-transform:        #C18A1E;  /* amber        */
  --color-transform-surface:#FBF1D8;
  --color-transform-text:   #854F0B;
  --color-uns:              #1F6FB8;  /* steel blue — also the focus colour */
  --color-uns-surface:      #E5EEF7;
  --color-uns-border:       #BFD3E8;
  --color-uns-text:         #185FA5;
  --color-profile:          #6F4FA8;  /* muted aubergine */
  --color-profile-surface:  #EFE9F5;
  --color-profile-border:   #D5C7E5;
  --color-profile-text:     #4F3580;

  /* Status — always paired with a label, never colour-only */
  --color-success:          #2D7F46;
  --color-success-surface:  #E5EFE5;
  --color-warning:          #C18A1E;
  --color-warning-surface:  #FBF1D8;
  --color-error:            #B7372B;
  --color-error-surface:    #F7E1DE;

  /* Elevated-risk — "working, but watch it". Not red, not amber. */
  --color-risk-attention:         #7A4FB8;
  --color-risk-attention-surface: #F0EAF7;

  /* Type */
  --font-sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry — cards 6px, buttons/inputs 4px, pills 999px. No shadows. */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;

  /* 4px spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

/* ---------------------------------------------------------------------------
   2. DARK PALETTE — manually authored, warm near-black (not cold blue-black).
      Same product under different lighting. Semantics preserved across modes.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-background-primary:   #1A1715;  /* warm near-black, NOT #000 */
  --color-background-secondary: #221E1B;
  --color-background-tertiary:  #2A2622;
  --color-background-info:      #1E2A38;

  --color-text-primary:   #F2EDE5;  /* warm off-white, NOT #FFF */
  --color-text-secondary: #B5ADA1;
  --color-text-tertiary:  #857D71;
  --color-text-info:      #79B0E0;

  --color-border-primary:   #4A433C;
  --color-border-secondary: #3A332D;
  --color-border-tertiary:  #2F2A25;

  --color-source:           #5BB378;
  --color-source-surface:   #1F3326;
  --color-transform:        #E0B05A;
  --color-transform-surface:#3A2F1A;
  --color-transform-text:   #E0B05A;
  --color-uns:              #5BA0DD;
  --color-uns-surface:      #1A2C42;
  --color-uns-border:       #2C4866;
  --color-uns-text:         #79B0E0;
  --color-profile:          #A07AD6;
  --color-profile-surface:  #2A2240;
  --color-profile-border:   #3D3358;
  --color-profile-text:     #B89CE0;

  --color-success:          #5BB378;
  --color-success-surface:  #1F3326;
  --color-warning:          #E0B05A;
  --color-warning-surface:  #3A2F1A;
  --color-error:            #E07868;
  --color-error-surface:    #3A1F1B;

  --color-risk-attention:         #A580D9;
  --color-risk-attention-surface: #2C2240;
}

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

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Clean theme transition — colour-bearing props only, never `all`. */
  transition: background-color 150ms ease, color 150ms ease;
}

/* Type scale */
.t-display { font-size: 28px; font-weight: 600; line-height: 1.2; }
.t-title   { font-size: 20px; font-weight: 600; line-height: 1.2; }
.t-body    { font-size: 14px; font-weight: 400; line-height: 1.4; }
.t-caption { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.t-code    { font-family: var(--font-mono); font-size: 13px; font-weight: 400; }

a { color: var(--color-text-info); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--color-background-secondary); }
.btn:focus-visible {
  outline: none;
  border-color: var(--color-uns);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-uns) 25%, transparent);
}
.btn.primary { background: var(--color-uns); border-color: var(--color-uns); color: #fff; }
.btn.primary:hover { filter: brightness(0.95); }
.btn.amber   { background: var(--color-transform); border-color: var(--color-transform); color: #fff; }
.btn.amber:hover { filter: brightness(0.95); }
.btn.ghost   { background: none; border: none; color: var(--color-text-secondary); }
.btn.ghost:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.btn.icon-only { padding: 4px 6px; }
.btn svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------------
   5. BADGES / TAGS — monospace, low-saturation surfaces
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 3px;
}
.badge-green   { background: var(--color-success-surface);    color: var(--color-success); }
.badge-amber   { background: var(--color-transform-surface);  color: var(--color-transform-text); }
.badge-blue    { background: var(--color-uns-surface);        color: var(--color-uns-text); }
.badge-grey    { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.badge-profile { background: var(--color-profile-surface);    color: var(--color-profile-text);
                 border: 0.5px solid var(--color-profile-border); }
.badge-risk    { background: var(--color-risk-attention-surface); color: var(--color-risk-attention); }

/* ---------------------------------------------------------------------------
   6. FORMS — steel-blue focus everywhere
   --------------------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 11px; font-weight: 500; color: var(--color-text-secondary);
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 7px 10px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-sm);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: inherit; font-size: 13px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-uns);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-uns) 12%, transparent);
}
.form-field .hint { font-size: 11px; color: var(--color-text-tertiary); }

/* ---------------------------------------------------------------------------
   7. CARD
   --------------------------------------------------------------------------- */
.card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 16px;
}
/* Optional 3px domain leading edge */
.card.edge-source    { border-left: 3px solid var(--color-source); }
.card.edge-transform { border-left: 3px solid var(--color-transform); }
.card.edge-uns       { border-left: 3px solid var(--color-uns); }
.card.edge-profile   { border-left: 3px solid var(--color-profile); }
.card.edge-risk      { border-left: 2px solid var(--color-risk-attention); }

/* ---------------------------------------------------------------------------
   8. STATUS DOT
   --------------------------------------------------------------------------- */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px;
}
.status-dot.green { background: var(--color-success); }
.status-dot.amber { background: var(--color-warning); }
.status-dot.red   { background: var(--color-error); }
.status-dot.grey  { background: var(--color-text-tertiary); }

/* ---------------------------------------------------------------------------
   9. EMPTY STATE — calm by default (the ATM principle)
   --------------------------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px; text-align: center; color: var(--color-text-secondary);
}
.empty-state .empty-icon { color: var(--color-text-tertiary); margin-bottom: 4px; }
.empty-state .empty-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.empty-state .empty-sub { font-size: 12px; max-width: 360px; }

/* ---------------------------------------------------------------------------
   10. ELEVATED-RISK OVERLAY — diagonal stripe, theme-agnostic params
   --------------------------------------------------------------------------- */
.risk-overlay {
  position: relative;
}
.risk-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--color-risk-attention) 5%, transparent) 0 6px,
    transparent 6px 12px
  );
}