/* ============================================================
   Position Lens Design System — Obsidian Ledger
   Colors + Type + Spacing + Radii + Shadows
   Source of truth: lib/theme/app_theme.dart
   ============================================================ */

/* Local brand fonts — matches fonts/ directory */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype'); }

:root {
  /* ---------- BASE COLOR TOKENS (dark only) ---------- */
  /* Surface ramp */
  --bg:              #0a1421;  /* scaffold background */
  --surface:         #17202e;  /* cards, table header */
  --surface-low:     #131c2a;
  --surface-high:    #212a39;
  --surface-highest: #2c3544;

  /* Brand */
  --primary:              #a9c7ff;  /* electric blue — links, focus, axis */
  --primary-container:    #1c59a5;  /* button fill companion */
  --on-primary:           #003063;
  --on-primary-container: #bbd2ff;

  /* Accent (long / positive / credit / connected) */
  --accent:           #36ffc4;
  --accent-dim:       #00e1ab;
  --on-accent:        #003828;

  /* Tertiary / short / negative / error */
  --tertiary:         #ffb3ae;
  --on-tertiary:      #680009;
  --error:            #ffb4ab;
  --error-container:  #93000a;

  /* Text */
  --fg1: #dae3f6;  /* textPrimary / on-surface */
  --fg2: #c2c6d3;  /* textSecondary / on-surface-variant */
  --fg3: #8c919c;  /* outline / muted */

  /* Divider / outline */
  --divider:         #424751;
  --divider-soft:    rgba(66, 71, 81, 0.5);

  /* Leg / pill tokens — long (green) */
  --long-outer:         #0d1f1a;
  --long-outer-border:  #36ffc4;
  --long-inner:         #071410;
  --long-text:          #36ffc4;
  --long-text-2:        #00e1ab;

  /* Leg / pill tokens — short (red) */
  --short-outer:        #1f0d0d;
  --short-outer-border: #ffb3ae;
  --short-inner:        #140707;
  --short-text:         #ffb3ae;
  --short-text-2:       #ccafac;

  /* Timeline semantic colors (adjustments) */
  --timeline-initial:    #2196f3;   /* Colors.blue */
  --timeline-adjustment: #ff9800;   /* Colors.orange */
  --timeline-current:    #4caf50;   /* Colors.green */

  /* Gradients (rare — primary button only) */
  --gradient-primary: linear-gradient(135deg, #a9c7ff 0%, #1c59a5 100%);
  --primary-gradient: linear-gradient(135deg, #a9c7ff 0%, #1c59a5 100%); /* alias */

  /* ---------- TYPE ---------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, SFMono-Regular, Consolas, monospace;
  /* Space Grotesk isn't technically mono but serves the numeric-data role */
  --font-data:    'Space Grotesk', 'Inter', sans-serif;

  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px;
  --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-24: 24px; --fs-32: 32px;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-body:   1.75;   /* matches Flutter bodyLarge/bodyMedium height */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING (4pt grid) ---------- */
  --s-1:  4px;
  --s-2:  6px;   /* half-step, used in dense rows */
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;

  /* ---------- RADII ---------- */
  --r-button:     6px;
  --r-card:       8px;
  --r-pill-outer: 16px;
  --r-pill-inner: 8px;
  --r-badge:      12px;
  --r-dot:        2px;
  --r-full:       9999px;

  /* ---------- BORDERS ---------- */
  --border:      1px solid var(--divider);
  --border-soft: 1px solid var(--divider-soft);

  /* ---------- SHADOWS ---------- */
  --shadow-rail:       -2px 0 4px rgba(0,0,0,0.2);
  --shadow-sidebar:    -2px 0 8px rgba(0,0,0,0.3);
  --shadow-notification: 0 8px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  /* Numeric aliases — elevation scale */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);

  /* ---------- MOTION ---------- */
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1); /* Material easeInOut */
  --dur-fast:   150ms;
  --dur-base:   300ms;   /* canonical sidebar reveal */
  --dur-slow:   500ms;

  /* ---------- LAYOUT CONSTANTS ---------- */
  --rail-width:          60px;
  --divider-hit:         28px;  /* draggable divider gutter */
  --login-card-max:      400px;
  --sidebar-min:         200px;
}

/* ============================================================
   SEMANTIC / ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titles — Inter, bold */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  line-height: var(--lh-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  line-height: var(--lh-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg2);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--fs-12);
  color: var(--fg2);
  line-height: var(--lh-snug);
}

/* Data labels — Space Grotesk */
.label,  .label-md { font-family: var(--font-data); font-size: var(--fs-12); color: var(--fg2); }
.label-sm          { font-family: var(--font-data); font-size: var(--fs-11); color: var(--fg2); }
.label-lg          { font-family: var(--font-data); font-size: var(--fs-14); color: var(--fg1); font-weight: var(--fw-medium); }

/* Numeric data */
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* Caps label — for PORTFOLIO / TOTAL summary */
.caps {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg1);
}

/* Dividers */
hr, .hr { border: 0; border-top: 1px solid var(--divider); margin: 0; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Links */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scrollbars (dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-highest); }