/* ==========================================================
   DevFolio — style.css
   Design tokens, reset, typography, base layout primitives.
   Loaded first. Theme variables live here; overridden by dark.css.
   ========================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --color-primary: #7C5CFF;
  --color-primary-dark: #6947E8;
  --color-primary-light: #9C85FF;
  --color-accent: #A855F7;
  --color-accent-2: #EC4899;

  /* Semantic */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, .12);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, .12);
  --color-danger: #EF4444;
  --color-danger-bg: rgba(239, 68, 68, .12);
  --color-info: #0EA5E9;

  /* Surfaces (light theme defaults; dark.css overrides via .dark) */
  --bg: #FFFFFF;
  --bg-subtle: #F7F7FB;
  --surface: #FFFFFF;
  --surface-2: #FBFAFF;
  --surface-border: #E9E7F3;
  --surface-shadow: 0 1px 2px rgba(20, 16, 45, .04), 0 10px 30px rgba(76, 60, 150, .08);
  --surface-shadow-hover: 0 4px 10px rgba(76, 60, 150, .08), 0 22px 44px rgba(76, 60, 150, .14);

  --text: #14151A;
  --text-muted: #62636E;
  --text-faint: #9295A1;
  --text-on-primary: #FFFFFF;

  --nav-bg: rgba(255, 255, 255, .78);

  /* Footer is intentionally a fixed dark band in both themes for consistent,
     always-readable contrast (a common pattern on premium SaaS sites). */
  --footer-bg: #0B0C11;
  --footer-bg-2: #101219;
  --footer-text: rgba(255, 255, 255, .68);
  --footer-text-strong: #FFFFFF;
  --footer-border: rgba(255, 255, 255, .08);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --transition-fast: .18s ease;
  --transition-base: .3s var(--ease-out);
  --transition-slow: .5s var(--ease-out);

  --container-width: 1280px;
  --container-width-narrow: 900px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); }
.container-narrow { max-width: var(--container-width-narrow); margin-inline: auto; padding-inline: var(--space-4); }

@media (min-width: 640px) { .container, .container-narrow { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container, .container-narrow { padding-inline: var(--space-8); } }

.section { padding-block: var(--space-16); }
.section-tight { padding-block: var(--space-8); }

.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; }
.section-title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.01em; }
.section-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.section-link { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* Simple, semantic grid helpers (not an atomic utility system — just the
   handful of layouts this site actually needs) */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex-row { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.flex-wrap-gap { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack { display: flex; flex-direction: column; }

.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff;
  padding: var(--space-2) var(--space-4); z-index: 100; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Print-friendly (legal pages) */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
}