/* portfolio.css — design tokens + base. Real website (not artboard). */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: rgba(10, 10, 10, 0.58);
  --ink-3: rgba(10, 10, 10, 0.34);
  --rule: rgba(10, 10, 10, 0.18);
  --rule-soft: rgba(10, 10, 10, 0.09);
  --accent: oklch(0.55 0.18 30);
  --font-display: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* fluid display sizes */
  --fs-mega: clamp(56px, 11vw, 168px);
  --fs-xl:   clamp(40px, 7vw, 104px);
  --fs-lg:   clamp(28px, 3.4vw, 56px);
}

/* Palettes */
.theme-paper { --bg:#ffffff; --ink:#0a0a0a; --ink-2:rgba(10,10,10,.58); --ink-3:rgba(10,10,10,.34); --rule:rgba(10,10,10,.18); --rule-soft:rgba(10,10,10,.09); --accent:oklch(0.55 0.18 30); }
.theme-bone  { --bg:#f4f1ea; --ink:#1a1815; --ink-2:rgba(26,24,21,.58); --ink-3:rgba(26,24,21,.34); --rule:rgba(26,24,21,.18); --rule-soft:rgba(26,24,21,.09); --accent:oklch(0.5 0.13 40); }
.theme-ink   { --bg:#0c0c0b; --ink:#f4f2ec; --ink-2:rgba(244,242,236,.6); --ink-3:rgba(244,242,236,.34); --rule:rgba(244,242,236,.2); --rule-soft:rgba(244,242,236,.09); --accent:oklch(0.82 0.15 85); }
.theme-mint  { --bg:#e7efe9; --ink:#0e1b13; --ink-2:rgba(14,27,19,.6); --ink-3:rgba(14,27,19,.32); --rule:rgba(14,27,19,.2); --rule-soft:rgba(14,27,19,.08); --accent:oklch(0.5 0.15 250); }

/* Font pairs */
.font-archivo   { --font-display:"Archivo Narrow","Helvetica Neue",sans-serif; --font-text:"Archivo","Helvetica Neue",sans-serif; }
.font-helvetica { --font-display:"Helvetica","Helvetica Neue",Arial,sans-serif; --font-text:"Helvetica","Helvetica Neue",Arial,sans-serif; }
.font-display   { --font-display:"Anton","Helvetica Neue",sans-serif; --font-text:"Archivo","Helvetica Neue",sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}
::selection { background: var(--ink); color: var(--bg); }

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

/* Helpers */
.pf-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.pf-mono-sm { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.pf-num { font-variant-numeric: tabular-nums; }
.pf-rule { height: 1px; background: var(--ink); display: block; }
.pf-rule-soft { height: 1px; background: var(--rule); display: block; }
.pf-em { color: var(--ink-2); }

/* Placeholder image */
.pf-img {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(10,10,10,.025) 0 7px, transparent 7px 14px),
    var(--tone, #d9d4c8);
}
.pf-img[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 12px 10px auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(10,10,10,.42);
  text-transform: uppercase;
}
.theme-ink .pf-img {
  background:
    repeating-linear-gradient(45deg, rgba(244,242,236,.04) 0 7px, transparent 7px 14px),
    var(--tone, #2a2a28);
}
.theme-ink .pf-img[data-label]::after { color: rgba(244,242,236,.4); }

/* App scaffold */
#root { min-height: 100vh; }
.pf-app { min-height: 100vh; display: flex; flex-direction: column; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}