/* ═══════════════════════════════════════════════════════════════════
   mydesignwork — DESIGN TOKENS
   tokens.css · v1.0

   Import on every page:
     <link rel="stylesheet" href="assets/css/tokens.css">
     <link rel="stylesheet" href="assets/css/components.css">

   All CSS custom properties live here. Never hardcode colors,
   fonts, spacing or radii — always reference a token.
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   FONTS — self-hosted Neue Montreal + Inter fallback
───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────────────────────────── */
:root {

  /* ── Colors ── */
  --color-brand:        #6c4be0;   /* primary purple */
  --color-brand-dark:   #5538c8;   /* hover / pressed */
  --color-brand-light:  #8b6fea;   /* on dark surfaces */
  --color-accent:       #b9ff4b;   /* lime — CTA, highlights */
  --color-accent-dark:  #9fd932;   /* lime hover */
  --color-dark:         #0f0e17;   /* near-black background */
  --color-dark-2:       #1c1a2e;   /* slightly lighter dark surface */
  --color-neutral:      #b0aec0;   /* body text on dark */
  --color-surface:      #f0eff8;   /* light section background */
  --color-white:        #ffffff;

  /* ── Typography ── */
  --font-heading: 'Neue Montreal', 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Spacing scale (px) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Border radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 100px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 4px rgba(15,14,23,.08);
  --shadow-md:    0 4px 16px rgba(15,14,23,.12);
  --shadow-brand: 0 8px 32px rgba(108,75,224,.22);
  --shadow-card:
    0 4px 6px  rgba(108,75,224,0.04),
    0 8px 24px rgba(108,75,224,0.07),
    0 24px 48px rgba(108,75,224,0.06);

  /* ── Layout ── */
  --max-w: 1320px;           /* max content width */
  --gap:    80px;            /* standard horizontal padding */
  --gap-sm: clamp(24px, 5vw, 80px); /* fluid version for sections */

  /* ── Motion ── */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --ease-mid:  cubic-bezier(.4,0,.2,1);
  --dur-fast:  .2s;
  --dur-mid:   .35s;
  --dur-slow:  .65s;
  --dur-reveal: .72s;
}

/* ─────────────────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.65;
  color: var(--color-white);
  background: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ─────────────────────────────────────────────────────────────────
   LAYOUT HELPERS
───────────────────────────────────────────────────────────────── */
/* Standard content constraint — used inside every section */
.wrap {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--gap-sm);
  padding-right: var(--gap-sm);
}

/* Section vertical rhythm */
.section {
  padding-top:    var(--space-24);
  padding-bottom: var(--space-24);
}
.section--light { background: var(--color-surface); }
.section--dark  { background: var(--color-dark); }
.section--white { background: var(--color-white); }

/* ─────────────────────────────────────────────────────────────────
   TYPE SCALE
───────────────────────────────────────────────────────────────── */
.d1 {
  font-family: var(--font-heading);
  font-size: clamp(64px, 9.5vw, 120px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.d2 {
  font-family: var(--font-heading);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.h1 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.h3 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* Label — eyebrow text above headings */
.lbl {
  display: block;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral);
}
/* On light backgrounds */
.lbl--brand { color: var(--color-brand); }

/* Body sizes */
.body-lg { font-size: 17px; line-height: 1.75; }
.body-sm { font-size: 13px; line-height: 1.65; }
.caption  { font-size: 11px; line-height: 1.5; color: var(--color-neutral); }

/* ─────────────────────────────────────────────────────────────────
   SCROLL REVEAL  [data-r] [data-d="1..4"]
   JS adds .on when element enters viewport
───────────────────────────────────────────────────────────────── */
[data-r] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
[data-r].on { opacity: 1; transform: none; }
[data-r][data-d="1"] { transition-delay: .10s; }
[data-r][data-d="2"] { transition-delay: .20s; }
[data-r][data-d="3"] { transition-delay: .32s; }
[data-r][data-d="4"] { transition-delay: .46s; }
/* Reset delay once revealed so hover works instantly */
[data-r].on[data-d="1"],
[data-r].on[data-d="2"],
[data-r].on[data-d="3"],
[data-r].on[data-d="4"] { transition-delay: 0s; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS (reference — use in media queries)
   --bp-sm:  480px   mobile
   --bp-md:  768px   tablet portrait
   --bp-lg:  960px   tablet landscape
   --bp-xl: 1280px   desktop
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --gap: 24px; --gap-sm: 20px; }
}