/* ============================================================
   Tad Natsuhara — Portfolio Design Tokens (Statement concept)
   Single source of truth. Import once, reference everywhere.
   Never hardcode a raw value in a component — use a var() below.

   oklch() is the source of truth and is supported in all current
   browsers. Hex equivalents are exact sRGB conversions, provided
   as a fallback/reference only.
   ============================================================ */

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:            #15120D; /* page background (warm near-black) */
  --bg-footer:     #0F0D09; /* contact footer / deepest surface */
  --bg-card:       #1A1610; /* cards */
  --bg-inset:      #26211A; /* image slots + capability chips */

  /* ---------- Color: text ---------- */
  --text-primary:   #F1EBDF; /* body + most headings */
  --text-bright:    #E7DFD2; /* emphasized inline names */
  --text-secondary: #D8CFC0; /* lead paragraphs */
  --text-tertiary:  #C9BCA6;
  --text-muted:     #A1957F; /* eyebrows, supporting copy, nav */
  --text-faint:     #736959; /* faint labels */
  --text-faint-2:   #8A8070; /* copyright */

  /* ---------- Color: accent (signature mint, keyed to TN_Port_Logo) ---------- */
  /* Use --accent for fills/solids, --accent-text for type on dark */
  --accent:       oklch(0.81 0.084 179); /* fallback #83D4C3 — the mark's stroke cores as rendered */
  --accent-text:  oklch(0.91 0.097 179); /* fallback #97F8E4 — the mark's file color; 15.0:1 on --bg */
  --accent-hex:        #83D4C3;
  --accent-text-hex:   #97F8E4;

  /* ---------- Color: inverted "Outcome" band (case studies) ---------- */
  --band-bg:    oklch(0.62 0.09 179);     /* fallback #3D9887 — same hue as the accent */
  --band-bg-hex: #3D9887;
  --band-text:  #0E1416;
  --band-card:     rgba(14, 20, 22, 0.85);    /* impact cards on the band: ink surface, paper text */
  --band-hairline: rgba(14, 20, 22, 0.2);     /* dividers between impact cards */

  /* ---------- Color: lines ---------- */
  --border:        rgba(241, 235, 223, 0.12); /* default card/section */
  --border-bright: rgba(241, 235, 223, 0.26); /* hover */
  --hairline:      rgba(241, 235, 223, 0.08); /* faintest */
  --hairline-2:    rgba(241, 235, 223, 0.16); /* stronger rule */
  --rule-strong:   #F1EBDF;                    /* 2px section opener rule */

  /* ---------- Color: header scrims (page bg at opacity) ---------- */
  --scrim-0:      rgba(21, 18, 13, 0);
  --scrim:        rgba(21, 18, 13, 0.82); /* homepage sticky header */
  --scrim-strong: rgba(21, 18, 13, 0.92); /* case header + subnav fade */

  /* ---------- Selection ---------- */
  --selection-bg:   #83D4C3; /* = --accent-hex; the wordmark as rendered */
  --selection-text: #0E1416;

  /* ---------- Typography: families ---------- */
  --font-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  /* weights in use: 400 500 600 700 800 */
  --font-display: 'Alegreya', Georgia, serif; /* calligraphic serif paired to the signature wordmark; weights 600 700 800 */
  --ls-serif: -0.012em; /* Alegreya needs looser tracking than the grotesque */

  /* ---------- Typography: fluid scale (clamp = min, fluid, max) ---------- */
  --fs-display:   clamp(2.5rem, 8.4vw, 7rem); /* hero headline; 112px cap + 8.4vw keep 'Complexity is inevitable.' (its widest string, ~1123px at the cap) on one line from ~500px up through the widest viewports — it wraps only on phones, where 3 lines is intended. Do not raise the cap past 7rem: at 118px the line is 1183px and overflows the 1180px container by 3px. */
  --fs-section:   clamp(1.875rem, 4vw, 3.375rem); /* section headlines */
  --fs-section-sm:clamp(1.75rem, 3.6vw, 2.875rem);
  --fs-statement: clamp(1.5rem, 3.1vw, 2.75rem); /* big statements */
  --fs-statement-sm: clamp(1.375rem, 2.7vw, 2.375rem);
  --fs-coda:      clamp(1.25rem, 2vw, 1.6875rem); /* closing lines under statements */
  --fs-lead:      clamp(1.0625rem, 1.6vw, 1.3125rem); /* lead paragraphs */
  --fs-body:      1rem;                       /* body 15–17px range */
  --fs-eyebrow:   0.75rem;                        /* uppercase labels */
  --fs-chip:      0.8125rem;

  /* ---------- Typography: tracking / leading ---------- */
  --ls-display:   -0.04em;
  --ls-section:   -0.03em;
  --ls-statement: -0.025em;
  --ls-eyebrow:    0.10em;
  --lh-display:    0.94;
  --lh-tight:      1.1;
  --lh-statement:  1.18; /* multi-line statements need more air than display */
  --lh-body:       1.6;

  /* ---------- Layout ---------- */
  --max-width:   1180px;
  --gutter:      40px;       /* left/right page padding */
  --section-pad: 110px;      /* vertical section rhythm (range 60–130) */
  --gap-stack:   24px;       /* card stacks / tight grids */
  --gap-split:   64px;       /* two-column splits (range 56–72) */
  --header-offset: 110px;    /* scroll-margin-top for anchors */

  /* ---------- Radius ---------- */
  --r-card:     14px;
  --r-feature:  20px; /* large featured case-study cards */
  --r-summary:  18px; /* case-study summary card */
  --r-portrait: 16px;
  --r-pill:     100px; /* pills + chips */
  --r-focus:    4px;   /* keyboard focus-ring corner softening */

  /* ---------- Motion ---------- */
  --reveal-dur:  0.7s;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hover-dur:   0.4s; /* border-color */
  --hover-color-dur: 0.3s;
  --dot-glow: 0 0 10px oklch(0.81 0.084 179); /* About status dot */

  /* ---------- Elevation (DESIGN.md §4) ---------- */
  --shadow-ambient-rest:  0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-ambient-hover: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* ---------- Global base (apply once, e.g. in globals.css) ---------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-optical-sizing: auto; /* Bricolage carries a 12-96 opsz axis */
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: var(--header-offset); }

/* Centered content column used by every section */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Scroll-reveal — trigger by adding .is-visible via IntersectionObserver */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* Gated on html.js (set inline in <head>): without JS everything paints visible */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].is-visible {
  animation: revealUp var(--reveal-dur) var(--reveal-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; }
  [data-reveal].is-visible { animation: none; }
}

/* Tighter vertical rhythm on small screens (--section-pad range is 60-130) */
@media (max-width: 600px) {
  :root { --section-pad: 64px; }
}