/* =========================================================
   BASE.CSS — Reset, Design Tokens, Fluid Type, Spacing, Themes
   PAN Portfolio v11 — Dark-first Cybersecurity Design System
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent flash: set dark bg before CSS variables resolve */
html { background: #0A1628; }

/* Hide host-injected branding (tiiny.host, Netlify, etc.) */
[id*="tiiny"], [class*="tiiny"], [data-tiiny],
iframe[src*="tiiny"], div[style*="z-index: 2147483647"],
[id*="host-badge"], [class*="host-badge"],
a[href*="tiiny.host"], div[id*="powered-by"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg);
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --- Design Tokens --- */
:root {
  /* Typography */
  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid Type Scale (min 375px → max 1440px) */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);     /* 11-12px */
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);     /* 13-14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);          /* 15-16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.28vw, 1.175rem);        /* 17-18.8px */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);           /* 20-24px */
  --text-2xl:  clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);         /* 24-30px */
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);          /* 30-40px */
  --text-4xl:  clamp(2.25rem, 1.75rem + 1.6vw, 3.25rem);         /* 36-52px */
  --text-hero: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);             /* 44-72px */

  /* Spacing (4px base) */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6rem;      /* 96px */
  --space-12: 8rem;      /* 128px */

  /* Fluid section padding */
  --section-pad: clamp(3rem, 2.5rem + 2vw, 6rem);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.15);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.3);
  --shadow-xl:  0 16px 50px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 30px rgba(46,123,214,0.15);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1400px;
  --container-narrow: 720px;
  --nav-height: 72px;

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* --- Dark Theme (default) --- */
:root,
[data-theme="dark"] {
  --bg:               #0A1628;
  --bg-rgb:           10, 22, 40;
  --surface:          #111D32;
  --surface-elevated: #182740;
  --surface-hover:    #1e3050;

  --primary:          #0B5394;
  --primary-light:    #2E7BD6;
  --primary-lighter:  #4A9AEF;
  --primary-dark:     #083f73;

  --accent:           #D4A843;
  --accent-light:     #E8C76A;
  --accent-dark:      #B08A2E;

  --success:          #34D399;
  --warning:          #FBBF24;
  --error:            #EF4444;
  --info:             #60A5FA;

  --text-primary:     #F1F5F9;
  --text-secondary:   #94A3B8;
  --text-muted:       #64748B;

  --border:           rgba(255, 255, 255, 0.08);
  --border-hover:     rgba(255, 255, 255, 0.15);

  --glass-bg:         rgba(255, 255, 255, 0.04);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-bg-hover:   rgba(255, 255, 255, 0.07);

  --gradient-primary: linear-gradient(135deg, #0B5394 0%, #2E7BD6 100%);
  --gradient-accent:  linear-gradient(135deg, #D4A843 0%, #E8C76A 100%);
  --gradient-hero:    linear-gradient(135deg, #0A1628 0%, #111D32 50%, #0B5394 100%);
  --gradient-text:    linear-gradient(135deg, #2E7BD6 0%, #4A9AEF 40%, #D4A843 100%);

  --code-bg:          #0d1f36;

  color-scheme: dark;
}

/* --- Light Theme --- */
[data-theme="light"] {
  --bg:               #F8FAFC;
  --bg-rgb:           248, 250, 252;
  --surface:          #FFFFFF;
  --surface-elevated: #F1F5F9;
  --surface-hover:    #E2E8F0;

  --primary:          #0B5394;
  --primary-light:    #2E7BD6;
  --primary-lighter:  #4A9AEF;
  --primary-dark:     #083f73;

  --accent:           #B08A2E;
  --accent-light:     #D4A843;
  --accent-dark:      #8B6D20;

  --success:          #059669;
  --warning:          #D97706;
  --error:            #DC2626;
  --info:             #2563EB;

  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-muted:       #94A3B8;

  --border:           rgba(0, 0, 0, 0.08);
  --border-hover:     rgba(0, 0, 0, 0.15);

  --glass-bg:         rgba(255, 255, 255, 0.7);
  --glass-border:     rgba(0, 0, 0, 0.08);
  --glass-bg-hover:   rgba(255, 255, 255, 0.85);

  --gradient-primary: linear-gradient(135deg, #0B5394 0%, #2E7BD6 100%);
  --gradient-accent:  linear-gradient(135deg, #B08A2E 0%, #D4A843 100%);
  --gradient-hero:    linear-gradient(135deg, #E2E8F0 0%, #F1F5F9 50%, #dce8f5 100%);
  --gradient-text:    linear-gradient(135deg, #0B5394 0%, #2E7BD6 40%, #B08A2E 100%);

  --code-bg:          #F1F5F9;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 50px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 30px rgba(11,83,148,0.1);

  color-scheme: light;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 72ch;
}

strong { font-weight: 600; }

small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* --- Text Utilities --- */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-blue { color: var(--primary-light); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-tight { line-height: 1.15; }
.leading-normal { line-height: 1.6; }
.leading-relaxed { line-height: 1.75; }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

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

/* --- Scrollbar (dark theme) --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

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

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* --- Page Transition (prevent FOUC) --- */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.page-wrapper.page-ready {
  opacity: 1;
}

/* Fallback: if JS hasn't fired after 0.4s, show the page anyway */
@keyframes page-fallback-show {
  to { opacity: 1; }
}
.page-wrapper {
  animation: page-fallback-show 0s 0.4s forwards;
}

.page-wrapper > main {
  flex: 1;
}