/* ==========================================================================
   MAIN SYSTEM VARIABLES & DESIGN FOUNDATIONS
   Swiss Minimalist + Modern Editorial + High-Tech Resume Architecture (2026)
   ========================================================================== */

:root {
  /* Color Palette (Prompt 1 & Prompt 2 Compliant) */
  --color-paper: #FFFFFF;
  --color-sidebar-bg: #F4F6F9;
  --color-canvas-bg: #EAEFF4;
  --color-ink-primary: #121820;
  --color-ink-secondary: #52606D;
  --color-ink-muted: #7E8C9A;
  
  /* Precision Accent Colors */
  --color-accent-primary: #1D4ED8;     /* Modern Cobalt */
  --color-accent-deep: #0F2A4A;        /* Deep Executive Navy */
  --color-accent-light: #EFF6FF;       /* Subtle Tint */
  --color-accent-glow: rgba(29, 78, 216, 0.12);
  
  /* Borders & Hairlines */
  --color-border-subtle: #E2E7ED;
  --color-border-light: #ECEFF3;
  --color-border-accent: rgba(29, 78, 216, 0.25);

  /* Typography Stacks */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Typographic Hierarchy */
  --font-size-name: 24pt;
  --font-size-title: 10.5pt;
  --font-size-h2: 9.5pt;
  --font-size-h3: 9.5pt;
  --font-size-body: 8.75pt;
  --font-size-small: 8pt;
  --font-size-meta: 7.5pt;

  /* Standard A4 Physical Dimensions (210mm x 297mm) */
  --a4-width: 210mm;
  --a4-height: 297mm;
  --a4-min-height: 297mm;

  /* Elevation Shadows (Desk / Floating Canvas) */
  --shadow-paper-ambient: 0 35px 70px -15px rgba(15, 23, 42, 0.18), 0 15px 25px -10px rgba(15, 23, 42, 0.08);
  --shadow-paper-edge: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  --shadow-chip-hover: 0 4px 10px rgba(29, 78, 216, 0.08);
  --shadow-interactive: 0 6px 16px -2px rgba(29, 78, 216, 0.16);

  /* Transition Durations */
  --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
}

/* ==========================================================================
   CSS RESETS & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-canvas-bg);
  color: var(--color-ink-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  overflow-x: hidden;
  position: relative;
}

/* Desktop Ambient Canvas Background (Prompt 3 #9) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 35%, #F8FAFC 0%, #E2E8F0 75%, #CBD5E1 100%);
  z-index: -2;
  pointer-events: none;
}

/* Subtle Grid Texture for Modern Tech Touch */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: -1;
  pointer-events: none;
}

/* Text Selection */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-accent-primary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}