/* ============================================================
   BASE.CSS - Dark Perry Wang tokens, glass scale, type, reset
   ============================================================ */

:root {
  /* ── palette ── */
  --background: #101010;
  --on-background: #f2f2f2;

  /* ── glass alpha scale ── */
  --glass-005: #f2f2f20d;
  --glass-010: #f2f2f21a;
  --glass-015: #f2f2f226;
  --glass-020: #f2f2f233;
  --glass-030: #f2f2f24d;
  --glass-040: #f2f2f266;
  --glass-050: #f2f2f280;

  /* ── surfaces ── */
  --card-bg: #252525;
  --card-border: #3d3d3d;
  --surface-raised: #1a1a1a;

  /* ── text ── */
  --text-primary: var(--on-background);
  --text-muted: var(--glass-050);
  --text-dim: #f2f2f27a;

  /* ── accents ── */
  --dot-red: #f46b5d;
  --dot-yellow: #f9bd4e;
  --dot-green: #57c353;
  --dot-blue: #5b8def;

  /* ── fonts ── */
  --font-display: "Albert Sans", "Inter", "Cairo", system-ui, -apple-system, sans-serif;
  --font-serif: "Gloock", "Georgia", serif;
  --font-accent: "Poppins", "Albert Sans", "Inter", "Cairo", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --font-body: "Inter", "Cairo", system-ui, sans-serif;

  /* ── type scale (px) ── */
  --text-hero: 80;
  --text-h1: 48;
  --text-h2: 32;
  --text-h3: 24;
  --text-h4: 20;
  --text-body: 16;
  --text-body-sm: 14;
  --text-caption: 12;

  /* ── radii ── */
  --radius: 32px;
  --radius-inner: 22px;
  --radius-sm: 16px;
  --radius-pill: 999px;

  /* ── shadows ── */
  --shadow-window: inset 0 0 8px #0006, 0 0 60px #0003, 0 30px 120px #000c;
  --shadow-card: 0 40px 80px #00000080;
  --shadow-pill: 0 10px 25px #00000026;
  --shadow-pill-hover: 0 15px 40px #0000004d;

  /* ── easing ── */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);

  /* ── layout ── */
  --max-w: 960px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 56px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: calc(var(--text-body) * 1px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.intro-active {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* ── focus ── */
:focus-visible {
  outline: 2px solid var(--dot-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── skip link ── */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--gutter);
  z-index: 9999;
  padding: 8px 16px;
  background: var(--on-background);
  color: var(--background);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: var(--gutter);
}

/* ── selection ── */
::selection {
  background: #f2f2f226;
  color: var(--on-background);
}

/* ── smooth scroll + anchor offset ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* ── scroll snap: cards rest in view ── */
html {
  scroll-snap-type: y proximity;
}

.project-card-outline,
.section-about,
.section-services,
.section-contact {
  scroll-snap-align: start;
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .project-card-outline,
  .section-about,
  .section-services,
  .section-contact {
    scroll-snap-align: none;
  }
}

/* ── scrollbar (webkit) ── */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #101010;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 5px;
  border: 2px solid #101010;
}
::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
}

/* ── scrollbar (firefox) ── */
html {
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a #101010;
}

/* ── language utility ── */
html[dir="rtl"] {
  --gutter: clamp(20px, 4vw, 48px);
}

/* ── font-feature ── */
.font-display {
  font-family: var(--font-display);
}

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