/* GENERATED — tokens mirrored from "Dilan Portfolio Design System/tokens/*.css".
   Never hand-edit: change values in Figma, re-export to tokens/, rebuild. */

/* Roboto is served from Google Fonts (woff2, subset by unicode-range) — see the
   stylesheet link in each page head. Weights 300/400/500/700/900 only; Roboto
   has no 600. assets/fonts/ stays on disk as an offline copy, unreferenced. */

/* ---- tokens/colors.css ---- */
/* One brand ramp, five inks, four surfaces, two lines. No second accent, no gradient.
   Contrast is a token property: measured ratios live beside each pair in guidelines/. */
:root{
  /* Brand ramp */
  --color-brand-50:#F0F7FB;   /* tinted section background */
  --color-brand-100:#CFE6F2;  /* borders + dividers on tint; focus ring inside footer */
  --color-brand-500:#2195C7;  /* large text ≥24px, icons, rules — 3.39:1 on white */
  --color-brand-600:#197CA6;  /* DEFAULT INTERACTIVE — buttons, links, focus ring. 4.69:1 */
  --color-brand-700:#146387;  /* hover / active; links on alt + tint surfaces. 6.64:1 */

  /* Ink */
  --color-ink-900:#32303D;    /* headings, primary body — 12.92:1 on white */
  --color-ink-700:#4E4B5C;    /* secondary body, long prose — 8.45:1 */
  --color-ink-500:#6B6879;    /* captions, supporting copy — 5.41:1 */
  --color-ink-400:#757282;    /* meta, eyebrows — smallest approved gray, WHITE ONLY. 4.68:1 */
  --color-ink-inverse:#FFFFFF;

  /* Surfaces + lines */
  --color-surface:#FFFFFF;
  --color-surface-alt:#F6F7F9;
  --color-surface-tint:#F0F7FB;
  --color-surface-deep:#32303D; /* footer only */
  --color-line:#E3E5EA;
  --color-line-soft:#F0F1F4;

  /* Semantic aliases — what components bind to */
  --text-primary:var(--color-ink-900);
  --text-secondary:var(--color-ink-700);
  --text-muted:var(--color-ink-500);
  --text-meta-color:var(--color-ink-400);
  --text-on-dark:var(--color-ink-inverse);
  --text-link:var(--color-brand-600);
  --text-link-hover:var(--color-brand-700);
  --surface-page:var(--color-surface);
  --surface-card:var(--color-surface);
  --surface-section-alt:var(--color-surface-alt);
  --surface-section-tint:var(--color-surface-tint);
  --surface-footer:var(--color-surface-deep);
  --border-card:var(--color-line);
  --border-rule:var(--color-line-soft);
  --interactive:var(--color-brand-600);
  --interactive-hover:var(--color-brand-700);
  --focus-ring:var(--color-brand-600);
  --focus-ring-on-dark:var(--color-brand-100);
  /* Scrims — only for text over photography or video. Measured: white text over
     the hero clips at 70% floor holds 5.1:1, at 85% 8.2:1. */
  --scrim-strong:rgba(50,48,61,.85);
  --scrim-soft:rgba(50,48,61,.70);
  /* Light scrims — ink-900 text over bright footage. Measured over the five hero
     clips: ink-900 holds 5.3:1 at 65% white, so 68% soft / 86% strong clear AA. */
  --scrim-light-strong:rgba(255,255,255,.86);
  --scrim-light-soft:rgba(255,255,255,.68);
  /* Copy plates — an opaque panel behind hero copy that sits over busy footage.
     Measured across 15 sampled frames from the home, AI and family clips:
     at 88% ink-900 holds 9.8:1 and ink-500 5.3:1 on the light plate, white
     holds 8.9:1 on the deep plate. */
  --plate-light:rgba(255,255,255,.88);
  --plate-deep:rgba(50,48,61,.88);
}

/* ---- tokens/typography.css ---- */
/* Roboto only. One family, differentiated by weight, size, and tracking.
   Fluid, not stepped — display and section heads use clamp(). Nothing ships below 13px. */
:root{
  --font-sans:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display:clamp(2.5rem, 6vw, 4rem);
  --text-display--weight:900;
  --text-display--line-height:1.05;
  --text-display--letter-spacing:-0.03em;

  --text-h2:clamp(1.875rem, 4vw, 2.75rem);
  --text-h2--weight:900;
  --text-h2--line-height:1.15;
  --text-h2--letter-spacing:-0.02em;

  --text-h3:clamp(1.25rem, 2vw, 1.5rem);
  --text-h3--weight:700;
  --text-h3--line-height:1.25;
  --text-h3--letter-spacing:-0.015em;

  --text-lede:clamp(1.125rem, 2vw, 1.375rem);
  --text-lede--line-height:1.5;

  --text-body:1.0625rem;      /* 17px */
  --text-body--line-height:1.65;
  --text-sm:0.9375rem;        /* 15px — captions, footer, buttons */
  --text-meta:0.8125rem;      /* 13px — FLOOR; nothing smaller ships */
  --text-meta--letter-spacing:0.14em;

  /* Weights — the only five that exist */
  --weight-light:300;         /* wordmark role line */
  --weight-regular:400;       /* body, ledes */
  --weight-medium:500;        /* buttons, nav, eyebrows, emphasis */
  --weight-bold:700;          /* sub-heads, card titles */
  --weight-black:900;         /* display, section heads, stat numbers */
}

/* ---- tokens/space.css ---- */
/* Tailwind's default 0.25rem spacing scale, unchanged. The rhythms that should
   breathe — section padding and gutter — are the only additions, both clamp(). */
:root{
  --s:0.25rem;                                  /* spacing unit */
  --spacing-section:clamp(4rem, 10vw, 8rem);
  --spacing-gutter:clamp(1.25rem, 4vw, 2.5rem);
  --container-max:1200px;
  --container-measure:68ch;                     /* prose column — never full-bleed body text */
  --radius-sm:6px;                              /* inputs, tags */
  --radius:12px;                                /* cards, buttons */
  --radius-lg:20px;                             /* media frames */
  --target-min:44px;                            /* minimum interactive target */

  /* Breakpoints — Tailwind v4 defaults, unchanged. Mobile-first, no custom breakpoints. */
  --bp-sm:40rem;
  --bp-md:48rem;
  --bp-lg:64rem;
  --bp-xl:80rem;
}

/* ---- tokens/elevation.css ---- */
/* Three shadows, all tinted with ink-900 (50,48,61) rather than pure black. */
:root{
  --shadow-1:0 1px 2px rgba(50,48,61,.04), 0 4px 16px rgba(50,48,61,.04);  /* resting cards */
  --shadow-2:0 2px 4px rgba(50,48,61,.05), 0 12px 32px rgba(50,48,61,.07); /* hover */
  --shadow-3:0 8px 20px rgba(50,48,61,.08), 0 24px 60px rgba(50,48,61,.10);/* media frames */
}

/* ---- tokens/motion.css ---- */
/* One curve, one duration band. Motion signals state or connects two views;
   nothing moves to decorate. Everything is gated behind prefers-reduced-motion.
   fast = hover, focus, 1px press · default = nav, borders, media scale
   slow = scroll reveal (12px rise + fade, 60ms stagger) */
:root{
  --ease-brand:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --duration-fast:150ms; /* @kind other */
  --duration:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
}