/* ============================================================================
   ML PORTFOLIO — DESIGN SYSTEM FOUNDATIONS
   Swiss-technical / blueprint console. Dark monochrome + electric cyan signal.
   Load this once at the root of any document. It defines:
     1. Webfont imports (Google Fonts CDN)
     2. Raw design tokens  (--bg-*, --fg-*, --accent-*, --line-*, scale, etc.)
     3. Semantic vars      (--h1, --label, --code, radii, shadows, grid)
     4. A tiny base layer   (selection, ::-webkit-scrollbar, .blueprint grid)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- FONT FAMILIES -------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;   /* technical display */
  --font-body:    'Archivo', system-ui, sans-serif;          /* Swiss neo-grotesque body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* data, labels, code */

  /* ---- CORE PALETTE — dark monochrome graphite ----------------------- */
  --bg-void:   #07090b;  /* deepest backdrop, behind everything */
  --bg-base:   #0c0f12;  /* default page surface */
  --bg-raised: #13171b;  /* cards, panels */
  --bg-overlay:#191e24;  /* menus, popovers, hover surfaces */
  --bg-inset:  #05070908;/* subtle inset wash (use over base) */

  /* foreground / ink — cool neutral ramp */
  --fg-0: #e9eef1;  /* primary text, headings */
  --fg-1: #9ca7ad;  /* secondary text */
  --fg-2: #626d75;  /* tertiary / captions */
  --fg-3: #3b444c;  /* faint / disabled / placeholder */

  /* hairlines & grids */
  --line-1: rgba(233,238,241,0.07);  /* default hairline */
  --line-2: rgba(233,238,241,0.13);  /* stronger divider */
  --line-3: rgba(233,238,241,0.22);  /* emphasis border / focus track */
  --grid:   rgba(34,211,238,0.055);  /* blueprint cyan grid line */
  --grid-strong: rgba(34,211,238,0.10);

  /* ---- ACCENT — electric cyan signal --------------------------------- */
  --accent:      #22d3ee;
  --accent-bright:#5ee9ff;
  --accent-dim:  #0e7490;
  --accent-deep: #0b3a44;
  --accent-wash: rgba(34,211,238,0.10);
  --accent-line: rgba(34,211,238,0.35);
  --accent-glow: rgba(34,211,238,0.45);
  --on-accent:   #07090b;  /* text/icon on an accent fill */
  /* translucent "glass" surfaces (theme-aware so they flip in light mode) */
  --glass-nav:        rgba(7,9,11,0.72);
  --glass-nav-solid:  rgba(7,9,11,0.94);
  --glass-panel:      rgba(19,23,27,0.5);
  --glass-panel-soft: rgba(19,23,27,0.35);
  color-scheme: dark;

  /* ---- SEMANTIC SIGNALS (restrained) --------------------------------- */
  --ok:    #4ade80;  /* online / pass / success */
  --warn:  #fbbf24;  /* caution */
  --crit:  #fb7185;  /* error / offline */
  --ok-wash:   rgba(74,222,128,0.12);
  --warn-wash: rgba(251,191,36,0.12);
  --crit-wash: rgba(251,113,133,0.12);

  /* ---- TYPE SCALE (1.25 major-third-ish, tuned) ---------------------- */
  --t-display: clamp(48px, 9vw, 128px);
  --t-h1: clamp(36px, 4.5vw, 60px);
  --t-h2: clamp(30px, 3.6vw, 52px);
  --t-h3: 24px;
  --t-h4: 19px;
  --t-body: 16px;
  --t-sm: 14px;
  --t-xs: 12px;
  --t-micro: 10.5px;   /* mono registration labels */

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-label: 0.18em;  /* uppercase mono labels */
  --tracking-tight: -0.02em; /* display */

  /* ---- SPACING (4px base grid) --------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- RADII — minimal, hard-edged Swiss ----------------------------- */
  --r-0: 0px;     /* default: sharp corners */
  --r-1: 2px;     /* inputs, chips */
  --r-2: 4px;     /* cards */
  --r-3: 8px;     /* large panels (rare) */
  --r-full: 999px;

  /* ---- ELEVATION / SHADOWS — flat + crisp + cyan focus --------------- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.5);
  --shadow-2: 0 8px 30px -12px rgba(0,0,0,0.8);
  --shadow-panel: 0 24px 80px -32px rgba(0,0,0,0.9);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 0 24px -4px var(--accent-glow);
  --focus-ring: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-wash);

  /* ---- MOTION -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* decisive entrance */
  --ease-snap: cubic-bezier(0.5, 0, 0.1, 1);     /* mechanical */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ---- LIGHT THEME — "blueprint on paper" ----------------------------- */
/* Token overrides only; every component reads these vars, so the whole UI
   flips. The chip 3D viewport stays a dark technical display in both themes. */
[data-theme="light"] {
  --bg-void:   #e6eaed;
  --bg-base:   #f5f7f8;
  --bg-raised: #ffffff;
  --bg-overlay:#ffffff;
  --bg-inset:  #0b121807;

  --fg-0: #0b1014;
  --fg-1: #3f4a52;
  --fg-2: #67727a;
  --fg-3: #aab2b8;

  --line-1: rgba(11,16,20,0.10);
  --line-2: rgba(11,16,20,0.16);
  --line-3: rgba(11,16,20,0.26);
  --grid:   rgba(14,116,144,0.08);
  --grid-strong: rgba(14,116,144,0.14);

  --accent:       #0e7490;
  --accent-bright:#0891b2;
  --accent-dim:   #155e75;
  --accent-deep:  #cffafe;
  --accent-wash:  rgba(14,116,144,0.10);
  --accent-line:  rgba(14,116,144,0.32);
  --accent-glow:  rgba(14,116,144,0.40);
  --on-accent:    #ffffff;
  --glass-nav:        rgba(245,247,248,0.80);
  --glass-nav-solid:  rgba(245,247,248,0.96);
  --glass-panel:      rgba(255,255,255,0.55);
  --glass-panel-soft: rgba(255,255,255,0.42);

  --ok:   #16a34a;
  --warn: #b45309;
  --crit: #e11d48;
  --ok-wash:   rgba(22,163,74,0.12);
  --warn-wash: rgba(180,83,9,0.12);
  --crit-wash: rgba(225,29,72,0.12);

  color-scheme: light;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY  — apply via these classes/vars
   ========================================================================== */
.ds-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
}
.ds-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-0); }
.ds-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-0); }
.ds-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--fg-0); }
.ds-h4 { font-family: var(--font-body); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; color: var(--fg-0); }

.ds-body { font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); color: var(--fg-1); }
.ds-sm   { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.5; color: var(--fg-1); }

/* Mono registration label — the signature technical detail */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.ds-code {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-0);
}
.ds-data { font-family: var(--font-mono); font-size: var(--t-body); font-weight: 500; color: var(--fg-0); font-variant-numeric: tabular-nums; }

/* ============================================================================
   BASE LAYER
   ========================================================================== */
.ds-root, body.ds-root {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Blueprint grid background — apply .ds-grid to a full-bleed layer */
.ds-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ds-grid-fine {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Scan-line overlay — apply to ::after of a positioned element */
.ds-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* Cursor blink + glitch keyframes available globally */
@keyframes ds-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes ds-glitch {
  0%,100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 40% 0); transform: translate(-2px,0); }
  40% { clip-path: inset(60% 0 10% 0); transform: translate(2px,0); }
  60% { clip-path: inset(30% 0 55% 0); transform: translate(-1px,0); }
}
@keyframes ds-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* thin technical scrollbar */
.ds-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.ds-root ::-webkit-scrollbar-track { background: var(--bg-void); }
.ds-root ::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--bg-void); }
.ds-root ::-webkit-scrollbar-thumb:hover { background: var(--line-3); }