/* ============================================
   DESIGN TOKENS — Mohd Arshad Khan Portfolio
   Palette: ink + marigold. A nod to Agra —
   sandstone amber against deep dusk blue,
   with a cool mint counter-accent.
   ============================================ */

:root[data-theme="light"] {
  /* Surfaces */
  --bg: #FBF7F0;
  --bg-soft: #F1E8D9;
  --surface: #FFFFFF;
  --surface-2: #F4E9DA;
  --surface-3: #EDE3D9;
  --line: rgba(33, 28, 22, 0.08);
  --line-strong: rgba(33, 28, 22, 0.14);
  --dot: #E3DCCE;
  --nav-border: rgba(33, 28, 22, 0.08);

  /* Text */
  --ink-0: #211C16;
  --ink-1: #6F675B;
  --ink-2: #ABA294;
  --ink-3: #7D6F61;
  --ink: #211C16;
  --ink-soft: #6F675B;

  /* Accent — teal */
  --amber-500: #2F6B5E;
  --amber-400: #5A8F7D;
  --amber-600: #25594E;
  --amber-tint: rgba(47, 107, 94, 0.12);

  /* Accent — green */
  --mint-500: #4A9E6F;
  --mint-600: #5FB988;
  --mint-tint: rgba(74, 158, 111, 0.12);

  /* Accent — yellow */
  --clay-500: #F4C24D;
  --clay-tint: rgba(244, 194, 77, 0.12);

  /* Supporting tokens */
  --pill-bg: #F1E8D9;
  --pill-border: #E3D7C0;
  --card-bg: #FFFFFF;
  --magenta: #2F6B5E;
  --yellow: #F4C24D;
  --green: #4A9E6F;

  /* Type */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* Container */
  --maxw: 1240px;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
}

:root[data-theme="dark"] {
  --bg: #17140F;
  --bg-soft: #241F17;
  --surface: #1F1B15;
  --surface-2: #241F17;
  --surface-3: #2A251F;
  --line: rgba(244, 239, 230, 0.1);
  --line-strong: rgba(244, 239, 230, 0.18);
  --dot: #2A2620;
  --nav-border: rgba(244, 239, 230, 0.1);

  --ink-0: #F4EFE6;
  --ink-1: #ABA294;
  --ink-2: #8E8575;
  --ink-3: #7C7362;
  --ink: #F4EFE6;
  --ink-soft: #ABA294;

  --amber-500: #2F6B5E;
  --amber-400: #5A8F7D;
  --amber-600: #25594E;
  --amber-tint: rgba(47, 107, 94, 0.12);

  --mint-500: #5FB988;
  --mint-600: #47A370;
  --mint-tint: rgba(95, 185, 136, 0.12);

  --clay-500: #F0C767;
  --clay-tint: rgba(240, 199, 103, 0.12);

  --pill-bg: #241F17;
  --pill-border: #35301F;
  --card-bg: #1F1B15;
  --magenta: #2F6B5E;
  --yellow: #F0C767;
  --green: #5FB988;

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  --maxw: 1240px;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--ink-0);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

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

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

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

::selection { background: var(--amber-500); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-500);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-500);
  flex-shrink: 0;
}