/* AK Portfolio — design tokens.
   Ported verbatim from the design handoff (site/tokens/*.css).
   Fonts are self-hosted: see fonts/fonts.css (replaces the Google Fonts import). */

/* ---------------- typography ---------------- */
/* Three-voice system:
   1. Fraunces  — the voice. All prose, headings, UI text. Light (300) by default.
   2. DM Mono   — the annotator. Micro-labels, metadata, captions, and LINKS.
   3. Pixelify Sans — the signature. Logo + rare decorative moments ONLY.
   SCALE — strict 1.25 (major third) ratio off a 16px base:
   11 → 13 → 16 → 20 → 25 → 31 → 39. No off-scale sizes.
   ITALICS — reserved for quoted human voices (testimonials) only. */

:root {
  --font-body:    'Fraunces', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-display: 'Pixelify Sans', sans-serif;   /* decorative only */

  /* ---- scale (1.25 ratio, 16px base) ---- */
  --fs-micro:     11px;   /* mono eyebrow labels */
  --fs-caption:   13px;   /* mono captions, metadata */
  --fs-body:      16px;   /* all prose + UI text */
  --fs-ui:        16px;
  --fs-lede:      20px;   /* landing hook, row titles */
  --fs-hero:      20px;
  --fs-h2:        25px;   /* section heads (roman, 500) */
  --fs-h1:        clamp(31px, 5vw, 39px);  /* case-study titles */

  /* ---- weights (Fraunces) ---- */
  --fw-light:     300;    /* default prose */
  --fw-medium:    500;    /* names, row titles */
  --fw-semibold:  600;    /* project names inline */

  /* ---- line heights — leading steps DOWN as size steps up ---- */
  --lh-tight:     1.15;   /* 31–39px */
  --lh-heading:   1.3;    /* 25px */
  --lh-lede:      1.45;   /* 20–25px display */
  --lh-body:      1.8;    /* 16px prose */
  --lh-prose:     1.8;

  /* ---- letterspacing ---- */
  --ls-micro:     0.14em; /* uppercase mono labels */
  --ls-tight:     -0.02em;

  /* ---- semantic ---- */
  --text-hero:    var(--fw-light) var(--fs-h2)/1.45 var(--font-body);
  --text-label:   var(--fw-light) var(--fs-micro)/1.4 var(--font-mono);
}

/* ---------------- colors ----------------
   Light mode is the default. Dark mode is scoped to [data-ak-theme="dark"].
   All text tokens meet WCAG AA (≥ 4.5:1) against their intended surfaces. */

:root {
  /* ---- base neutrals (light) ---- */
  --bg:            #fefdfc;  /* page — near-white with a whisper of warmth */
  --bg-card:       #ffffff;  /* raised card / input surfaces */
  --surface:       #f5f3ef;  /* recessed tiles, thumbnails, quiet panels */
  --surface-hover: #efe9e2;  /* tile hover wash */
  --divider:       #e9e6e0;  /* hairlines */
  --border:        #e9e6e0;

  /* ---- text ---- */
  --text:          #1c1a17;  /* primary ink (16.5:1) */
  --text-2:        #46423d;  /* secondary prose (9.5:1) */
  --text-3:        #6e6960;  /* tertiary / muted (5.4:1) */
  --micro:         #6e6960;  /* mono micro-labels — AA at any size */

  /* ---- accent (terracotta, dialed back) ---- */
  --accent:        #b0603f;  /* brand accent — decorative, large text (3.9:1) */
  --accent-text:   #96502f;  /* accent used as text/links at any size (6.0:1) */
  --accent-wash:   #f6ece5;  /* faint accent tint for hovers/selection */

  /* ---- pills / tags ---- */
  --pill-bg:       #f0e6dc;
  --pill-text:     #6f4325;  /* 6.4:1 on --pill-bg */

  /* ---- status ---- */
  --status-live:   #4c7a50;  /* "ongoing" dot + AA text on bg */
  --status-past:   #6e6960;

  /* ---- semantic aliases ---- */
  --text-body:       var(--text-2);
  --text-heading:    var(--text);
  --text-caption:    var(--text-3);
  --link:            var(--accent-text);
  --surface-page:    var(--bg);
  --surface-card:    var(--bg-card);
  --surface-tile:    var(--surface);
  --shadow-lift:     0 16px 40px rgba(28, 26, 23, 0.10);
  --overlay-scrim:   rgba(28, 26, 23, 0.28);
}

/* ---- dark mode: inverted with care, not flipped ----
   Warm near-black, ink becomes warm bone; accent lightens one step
   so it keeps AA contrast; shadows are replaced by subtle borders. */
[data-ak-theme="dark"] {
  --bg:            #171512;
  --bg-card:       #1e1c18;
  --surface:       #242119;
  --surface-hover: #2c2820;
  --divider:       #34302a;
  --border:        #34302a;

  --text:          #ede9e2;  /* 14.9:1 */
  --text-2:        #c6c0b6;  /* 9.8:1 */
  --text-3:        #a19a8d;  /* 6.1:1 */
  --micro:         #a19a8d;

  --accent:        #d68a63;  /* 6.2:1 on --bg */
  --accent-text:   #dd9670;  /* 7.1:1 */
  --accent-wash:   #2e241d;

  --pill-bg:       #35291f;
  --pill-text:     #e2b394;
  --status-live:   #8db98f;
  --status-past:   #a19a8d;

  --shadow-lift:   0 16px 40px rgba(0, 0, 0, 0.45);
  --overlay-scrim: rgba(0, 0, 0, 0.45);
}

/* ---------------- spacing, radii, layout ---------------- */
:root {
  /* ---- layout ---- */
  --max-width:        760px;  /* landing / lists */
  --max-width-prose:  720px;  /* case studies */
  --pad-page:         32px;
  --pad-page-mobile:  20px;

  /* ---- vertical rhythm (generous, editorial) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   100px;  /* the section beat on the landing page */

  /* ---- radii ---- */
  --radius-xs:   2px;   /* social dots */
  --radius-sm:   8px;   /* quiz options, small thumbs */
  --radius-md:   10px;  /* thumbnails, action buttons, visuals */
  --radius-lg:   12px;  /* quiz panel, grid thumbs */
  --radius-xl:   22px;  /* jump-off icon tiles */
  --radius-tile: 32px;  /* logo/play-button tile */
  --radius-pill: 14px;  /* tag pills */
}

/* Page padding collapses on small screens. */
@media (max-width: 600px) {
  :root {
    --pad-page: 20px;
  }
}

/* ---------------- motion ----------------
   Quiet, springy-but-restrained. Everything eases OUT with a long tail. */
:root {
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* signature ease-out */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.66, -0.35, 0.3, 1.45); /* play-button morph only */

  --dur-fast:    180ms;  /* color/border hovers */
  --dur-med:     320ms;  /* tile lifts */
  --dur-slow:    520ms;  /* scroll reveals */
  --dur-enter:   650ms;  /* page enter */
}

/* ---------------- base element styles ---------------- */
*, *::before, *::after { box-sizing: border-box; }

:root { color-scheme: light; }
[data-ak-theme="dark"] { color-scheme: dark; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Links — DM Mono, muted accent, no underline at rest.
   Hover/focus adds an underline so links are never color-only. */
a {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-in-out);
}
a:hover, a:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:active { position: relative; top: 1px; }
a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-wash); color: var(--text); }
[data-ak-theme="dark"] ::selection { background: var(--accent-wash); color: var(--text); }

/* Project rows: hairline between rows only (contact-list convention) */
.ak-project-li + .ak-project-li { border-top: 1px solid var(--divider); }
ul .ak-project-li:first-child { padding-top: 0 !important; }