/* ============================================================
   JP ROBOTIC — DESIGN TOKENS (single source of truth)
   Requires this file loaded BEFORE all other stylesheets.
   ============================================================ */

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

:root, html[data-theme="light"] {
  /* Brand */
  --blue: #0099e6; 
  --blue2: #007ab8; 
  --blue-lt: #33b3f5;
  --gold: #b8922e; 
  --gold-lt: #c9a84c;
  --green: #22c55e; 
  --red: #ef4444;

  /* Fonts */
  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* Layout */
  --max: 1200px;
  --pad: clamp(18px, 4.5vw, 64px);
  --sec: clamp(60px, 8vw, 104px);

  /* Light Surface System */
  --bg: #e8ecf2; 
  --bg2: #f2f5f9; 
  --bg3: #d8e0ec;
  --surface: #ffffff; 
  --surface2: #edf1f6;
  --border: rgba(0, 0, 0, 0.10); 
  --border2: rgba(0, 0, 0, 0.22);
  --text: #2d3748; /* Darkened from #4a5568 for fuller body weight/readability */
  --text2: #1e2533; 
  --heading: #0b0e14;
  --muted: #6b7a92; 
  --faint: #c8cfe0;
  --card: #ffffff; 
  --card2: #edf1f7;

  /* Light Mode Image Filters & Overlays */
  --img-f: brightness(0.95) saturate(1);
  --img-f2: brightness(1) saturate(1.05);
  --overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  
  color-scheme: light;
}

html[data-theme="dark"] {
  /* Dark Surface System */
  --bg: #0c0e12; 
  --bg2: #10131a; 
  --bg3: #161b24;
  --surface: #1a2030; 
  --surface2: #1e2638;
  --border: rgba(255, 255, 255, 0.07); 
  --border2: rgba(255, 255, 255, 0.13);
  --text: #8a94a8; 
  --text2: #bdc5d4; 
  --heading: #e8ecf4;
  --muted: #6b7a92; 
  --faint: #252d3a;
  --card: #10131a; 
  --card2: #141820;

  /* Dark Mode Image Filters & Overlays */
  --img-f: brightness(0.82) saturate(0.90);
  --img-f2: brightness(0.90) saturate(0.95);
  --overlay-gradient: linear-gradient(to top, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.35) 60%, transparent 100%);
  
  color-scheme: dark;
}