/* ============================================================
   SHERWOOD PORTFOLIO — tokens.css
   Single source of truth. Three viewer modes via [data-mode="..."]:
     • recruiter        → warm cream "bento" grid, rounded cards
     • hiring-manager   → editorial booklet, white pages, amber accent
     • designer         → editorial booklet (Designer-A), strict mono margins

   Stephen Sherwood — Product Designer
   ============================================================ */


/* ============================================================
   1. FONTS
   - Acid Grotesk: display / headings (self-hosted, all 5 weights)
   - DM Sans: body
   - DM Mono: labels, metadata, technical type, margin marginalia
   - Georgia: italic accent (system font, no load needed)
   ============================================================ */

@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/AcidGrotesk-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/AcidGrotesk-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/AcidGrotesk-Normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/AcidGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('assets/fonts/AcidGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ============================================================
   2. PRIMITIVES (shared across modes)
   Spacing, type scale, radii primitives, motion, layout.
   Color and per-mode radius/shadow assignments live in §3.
   ============================================================ */

:root {

  /* --- Font families (defaults; modes may reassign --font-display etc.) --- */
  --family-grotesk:  'Acid Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --family-dm-sans:  'DM Sans', system-ui, sans-serif;
  --family-dm-mono:  'DM Mono', 'JetBrains Mono', 'Courier New', monospace;
  --family-serif:    Georgia, serif;

  /* mode-overridable role aliases */
  --font-display: var(--family-grotesk);
  --font-body:    var(--family-dm-sans);
  --font-mono:    var(--family-dm-mono);

  /* --- Type scale (fluid clamps so desktop→mobile is smooth) --- */
  --text-xs:   0.75rem;                                 /* 12px */
  --text-sm:   0.875rem;                                /* 14px */
  --text-base: 1rem;                                    /* 16px */
  --text-md:   1.0625rem;                               /* 17px */
  --text-lg:   1.25rem;                                 /* 20px */
  --text-xl:   1.5rem;                                  /* 24px */
  --text-2xl:  clamp(1.625rem, 1.4rem + 1.2vw, 2rem);   /* ~26→32 */
  --text-3xl:  clamp(2rem,    1.6rem + 2vw,  2.75rem);  /* ~32→44 */
  --text-4xl:  clamp(2.5rem,  2rem   + 2.6vw, 3.75rem); /* ~40→60 */
  --text-5xl:  clamp(3rem,    2rem   + 5vw,   5rem);    /* ~48→80 */

  /* --- Line heights --- */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-body:   1.65;

  /* --- Weights --- */
  --weight-thin:    100;
  --weight-light:   200;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* --- Letter-spacing --- */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.16em;

  /* --- Spacing (4px base) --- */
  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout widths --- */
  --layout-max:       1240px;
  --layout-wide:      1440px;
  --layout-reading:    720px;
  --layout-narrow:     560px;
  --layout-padding-x: var(--space-6);
  --nav-height:        4rem;

  /* --- Radii primitives (modes pick which to use) --- */
  --radius-0:    0px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* --- Border widths --- */
  --hairline: 1px;
  --rule:     1px;

  /* --- Motion --- */
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:     var(--ease-default);
  --duration-fast:    150ms;
  --duration-default: 220ms;
  --duration-slow:    400ms;

  /* --- Focus ring (accessibility primitive; modes set --focus-color) --- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}


/* ============================================================
   3. MODE: RECRUITER  (default if no [data-mode] is set)
   Warm cream "bento" — large rounded cards, soft shadows.
   One accent color per card surface; cream background.
   ============================================================ */

:root,
[data-mode="recruiter"] {

  /* --- Surfaces (warm cream system) --- */
  --color-bg:             #F4EFE6;   /* warm cream — page bg */
  --color-bg-alt:         #EFE9DE;   /* slight darker cream — secondary */
  --color-surface:        #FBF8F2;   /* default card (lighter than bg) */
  --color-surface-raised: #FFFFFF;   /* hover / elevated */

  /* --- Borders --- */
  --color-border:        rgba(28, 25, 23, 0.08);
  --color-border-strong: rgba(28, 25, 23, 0.16);

  /* --- Text (warm near-black) --- */
  --color-text:           #1C1917;
  --color-text-secondary: #57534E;
  --color-text-tertiary:  #8C8479;
  --color-text-inverse:   #F7F4EF;

  /* --- Lead accent: dark pill CTA --- */
  --color-accent:         #1C1917;   /* near-black, used on the primary CTA */
  --color-accent-hover:   #000000;
  --color-accent-fg:      #FBF8F2;
  --focus-color:          #1C1917;

  /* --- Card "moods" (one accent per card, soft pastel washes) --- */
  --card-tint-cream:    #FBF8F2;
  --card-tint-cream-fg: #1C1917;

  --card-tint-violet:    #EDE7FB;     /* violet wash */
  --card-tint-violet-fg: #2E1A66;

  --card-tint-mint:      #DDEEE3;     /* mint wash */
  --card-tint-mint-fg:   #134E36;

  --card-tint-blush:     #F7E2DA;     /* warm blush */
  --card-tint-blush-fg:  #7B2D1E;

  --card-tint-sky:       #D9E8F2;     /* dusty sky */
  --card-tint-sky-fg:    #0F3D5C;

  --card-tint-ink:       #1C1917;     /* dark feature card */
  --card-tint-ink-fg:    #FBF8F2;

  /* --- Radii: rounded bento --- */
  --radius-card: var(--radius-2xl);   /* 36px — big bento corners */
  --radius-pill: var(--radius-full);
  --radius-chip: var(--radius-full);
  --radius-input: var(--radius-md);

  /* --- Shadows: present, soft, warm --- */
  --shadow-card:        0 1px 2px rgba(28,25,23,.04), 0 4px 12px rgba(28,25,23,.05);
  --shadow-card-hover:  0 2px 4px rgba(28,25,23,.05), 0 12px 28px rgba(28,25,23,.08);
  --shadow-button:      0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(0,0,0,.18);

  /* --- Type roles --- */
  --font-display: var(--family-grotesk);
  --font-body:    var(--family-dm-sans);
  --font-mono:    var(--family-dm-mono);

  /* --- Card padding --- */
  --card-padding: var(--space-8);
}


/* ============================================================
   4. MODE: HIRING MANAGER
   Editorial booklet — white pages, hairline rules, mono margin labels.
   Restrained AMBER accent for links and case-study decisions.
   ============================================================ */

[data-mode="hiring-manager"] {

  /* --- Surfaces (paper-white) --- */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #FAFAF7;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* --- Borders / hairlines --- */
  --color-border:        #E7E5E0;     /* page rules */
  --color-border-strong: #1C1917;     /* heavy section rules */

  /* --- Text --- */
  --color-text:           #0A0A09;
  --color-text-secondary: #44403C;
  --color-text-tertiary:  #8C8479;
  --color-text-inverse:   #FFFFFF;

  /* --- Accent: warm amber (restrained — links, decisions only) --- */
  --color-accent:         #B45309;
  --color-accent-hover:   #92400E;
  --color-accent-fg:      #FFFFFF;
  --color-accent-bg:      #FEF3C7;
  --focus-color:          #B45309;

  /* --- Radii: print-flat --- */
  --radius-card:  var(--radius-0);
  --radius-pill:  var(--radius-full);   /* still allowed for status chips */
  --radius-chip:  var(--radius-sm);
  --radius-input: var(--radius-0);

  /* --- Shadows: none. Editorial = flat. --- */
  --shadow-card:       none;
  --shadow-card-hover: none;
  --shadow-button:     none;

  /* --- Type roles (heavy editorial display) --- */
  --font-display: var(--family-grotesk);
  --font-body:    var(--family-dm-sans);
  --font-mono:    var(--family-dm-mono);

  --card-padding: var(--space-10);
}


/* ============================================================
   5. MODE: DESIGNER  (Designer-A: editorial booklet, strict)
   Same paper register as HM, but no accent color — black ink only.
   Heavier display, more aggressive negative space, mono margins.
   ============================================================ */

[data-mode="designer"] {

  /* --- Surfaces --- */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F7F6F2;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* --- Borders --- */
  --color-border:        #E7E5E0;
  --color-border-strong: #0A0A09;

  /* --- Text --- */
  --color-text:           #0A0A09;
  --color-text-secondary: #44403C;
  --color-text-tertiary:  #A8A29E;
  --color-text-inverse:   #FFFFFF;

  /* --- Accent: black only. No color. --- */
  --color-accent:         #0A0A09;
  --color-accent-hover:   #000000;
  --color-accent-fg:      #FFFFFF;
  --color-accent-bg:      #F7F6F2;
  --focus-color:          #0A0A09;

  /* --- Radii: zero everywhere --- */
  --radius-card:  var(--radius-0);
  --radius-pill:  var(--radius-0);
  --radius-chip:  var(--radius-0);
  --radius-input: var(--radius-0);

  /* --- No shadows --- */
  --shadow-card:       none;
  --shadow-card-hover: none;
  --shadow-button:     none;

  /* --- Type roles --- */
  --font-display: var(--family-grotesk);
  --font-body:    var(--family-dm-sans);
  --font-mono:    var(--family-dm-mono);

  --card-padding: var(--space-12);
}


/* ============================================================
   6. SEMANTIC TYPE STYLES (utility classes — work in all modes)
   ============================================================ */

.t-display, h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
  margin: 0;
}

.t-h2, h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

.t-h3, h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.t-h4, h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: 68ch;
  margin: 0;
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

.t-margin-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.t-sidebar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.t-metric {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   7. RESET + GLOBAL
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

button { font: inherit; cursor: pointer; }

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