/* ============================================================
   ALTERCROFT — COLORS & TYPE
   Sovereign system. Black, white, restrained grays.
   Inter throughout. 8pt rhythm.
   ============================================================ */

/* Inter — variable, local. Upright only; italics use Georgia by design. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Inter is the only typeface. "Mono" uses Inter with tabular-nums, not a separate face. */

:root {
  /* ---------- Core palette — three tokens, plus pure black & white ---------- */
  --ac-ink:          #0A0A0A;   /* the dark — text, marks, deep surfaces */
  --ac-graphite:     #2A2D32;   /* the middle — body text, borders at alpha, secondary surfaces */
  --ac-paper:        #FAFAFB;   /* the light — recessed page, soft surfaces */
  --ac-black:        #000000;
  --ac-white:        #FFFFFF;

  /* ---------- Semantic foreground / background ---------- *
   * Tonal variation comes from alpha on ink/graphite, never new hues.       */
  --fg-1: var(--ac-ink);
  --fg-2: var(--ac-graphite);
  --fg-3: rgba(42, 45, 50, 0.65);   /* graphite @ 65% — captions, meta */
  --fg-4: rgba(42, 45, 50, 0.40);   /* graphite @ 40% — disabled, placeholder */
  --fg-inverse: var(--ac-white);

  --bg-1: var(--ac-white);
  --bg-2: var(--ac-paper);
  --bg-3: rgba(42, 45, 50, 0.05);   /* recessed surface */
  --bg-4: rgba(42, 45, 50, 0.08);   /* hover surface */
  --bg-inverse: var(--ac-ink);

  --border-1: rgba(10, 10, 10, 0.08);   /* default hairline */
  --border-2: rgba(10, 10, 10, 0.16);   /* stronger separator */
  --border-strong: var(--ac-graphite);

  /* No accent, no status colors. Hierarchy and state are expressed through
     weight, alpha, and surface — never through hue. */

  /* ---------- Type system ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Mono = Inter with tabular figures. No separate mono typeface. */
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Display & headings — tight tracking, monolithic */
  --t-display-xl-size:   96px;  --t-display-xl-lh:   0.95; --t-display-xl-ls:   -0.06em; --t-display-xl-wt: 700;
  --t-display-lg-size:   72px;  --t-display-lg-lh:   1.00; --t-display-lg-ls:   -0.05em; --t-display-lg-wt: 700;
  --t-h1-size:           56px;  --t-h1-lh:           1.00; --t-h1-ls:           -0.04em; --t-h1-wt:         700;
  --t-h2-size:           40px;  --t-h2-lh:           1.10; --t-h2-ls:           -0.03em; --t-h2-wt:         700;
  --t-h3-size:           32px;  --t-h3-lh:           1.15; --t-h3-ls:           -0.025em;--t-h3-wt:         600;
  --t-h4-size:           24px;  --t-h4-lh:           1.20; --t-h4-ls:           -0.02em; --t-h4-wt:         600;

  /* Body */
  --t-body-lg-size:      20px;  --t-body-lg-lh:      1.60; --t-body-lg-ls:      -0.01em;
  --t-body-size:         16px;  --t-body-lh:         1.70; --t-body-ls:         -0.005em;
  --t-body-sm-size:      14px;  --t-body-sm-lh:      1.60; --t-body-sm-ls:      0;

  /* UI */
  --t-label-size:        14px;  --t-label-lh:        1.00; --t-label-ls:        0.08em;
  --t-button-size:       15px;  --t-button-lh:       1.00; --t-button-ls:       -0.01em;
  --t-mono-size:         13px;  --t-mono-lh:         1.55;

  /* ---------- 8pt spacing scale ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;
  --s-10: 160px;

  /* Containers */
  --w-reading:   720px;
  --w-content:  1280px;
  --w-cinema:   1440px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Shadow — atmospheric, never decorative ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-3: 0 2px 4px rgba(0,0,0,0.04), 0 24px 48px rgba(0,0,0,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-std:  250ms;
  --dur-slow: 400ms;
}

/* ============================================================
   SEMANTIC CLASSES — drop-in styles for type
   ============================================================ */

.t-display-xl { font: var(--t-display-xl-wt) var(--t-display-xl-size)/var(--t-display-xl-lh) var(--font-sans); letter-spacing: var(--t-display-xl-ls); color: var(--fg-1); }
.t-display-lg { font: var(--t-display-lg-wt) var(--t-display-lg-size)/var(--t-display-lg-lh) var(--font-sans); letter-spacing: var(--t-display-lg-ls); color: var(--fg-1); }
.t-h1         { font: var(--t-h1-wt)         var(--t-h1-size)/var(--t-h1-lh)                 var(--font-sans); letter-spacing: var(--t-h1-ls);         color: var(--fg-1); }
.t-h2         { font: var(--t-h2-wt)         var(--t-h2-size)/var(--t-h2-lh)                 var(--font-sans); letter-spacing: var(--t-h2-ls);         color: var(--fg-1); }
.t-h3         { font: var(--t-h3-wt)         var(--t-h3-size)/var(--t-h3-lh)                 var(--font-sans); letter-spacing: var(--t-h3-ls);         color: var(--fg-1); }
.t-h4         { font: var(--t-h4-wt)         var(--t-h4-size)/var(--t-h4-lh)                 var(--font-sans); letter-spacing: var(--t-h4-ls);         color: var(--fg-1); }

.t-body-lg    { font: 400 var(--t-body-lg-size)/var(--t-body-lg-lh) var(--font-sans); letter-spacing: var(--t-body-lg-ls); color: var(--fg-2); }
.t-body       { font: 400 var(--t-body-size)/var(--t-body-lh)       var(--font-sans); letter-spacing: var(--t-body-ls);    color: var(--fg-2); }
.t-body-sm    { font: 400 var(--t-body-sm-size)/var(--t-body-sm-lh) var(--font-sans); letter-spacing: var(--t-body-sm-ls); color: var(--fg-3); }

.t-label      { font: 600 var(--t-label-size)/var(--t-label-lh) var(--font-sans); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--fg-3); }
.t-button     { font: 600 var(--t-button-size)/var(--t-button-lh) var(--font-sans); letter-spacing: var(--t-button-ls); }
.t-mono       { font: 500 var(--t-mono-size)/var(--t-mono-lh) var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Element resets that map to semantics */
body { font: 400 var(--t-body-size)/var(--t-body-lh) var(--font-sans); color: var(--fg-2); background: var(--bg-1); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1 { font: 700 var(--t-h1-size)/var(--t-h1-lh) var(--font-sans); letter-spacing: var(--t-h1-ls); color: var(--fg-1); margin: 0; }
h2 { font: 700 var(--t-h2-size)/var(--t-h2-lh) var(--font-sans); letter-spacing: var(--t-h2-ls); color: var(--fg-1); margin: 0; }
h3 { font: 600 var(--t-h3-size)/var(--t-h3-lh) var(--font-sans); letter-spacing: var(--t-h3-ls); color: var(--fg-1); margin: 0; }
h4 { font: 600 var(--t-h4-size)/var(--t-h4-lh) var(--font-sans); letter-spacing: var(--t-h4-ls); color: var(--fg-1); margin: 0; }
p  { margin: 0; }
code, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ============================================================
   Mobile — scale the type + section-spacing tokens down.
   Applies across every page that links this stylesheet.
   ============================================================ */
img, svg, video { max-width: 100%; }

@media (max-width: 640px) {
  :root {
    /* Display & headings */
    --t-display-xl-size: 46px; --t-display-xl-lh: 1.00; --t-display-xl-ls: -0.04em;
    --t-display-lg-size: 40px; --t-display-lg-lh: 1.02; --t-display-lg-ls: -0.035em;
    --t-h1-size: 33px;  --t-h1-lh: 1.06; --t-h1-ls: -0.025em;
    --t-h2-size: 26px;  --t-h2-lh: 1.15; --t-h2-ls: -0.02em;
    --t-h3-size: 22px;  --t-h3-lh: 1.2;
    --t-h4-size: 20px;

    /* Body */
    --t-body-lg-size: 17px; --t-body-lg-lh: 1.55;

    /* Section-scale spacing — tighten margins & padding */
    --s-5: 24px;
    --s-6: 24px;
    --s-7: 40px;
    --s-8: 56px;
    --s-9: 64px;
    --s-10: 80px;
  }
}

/* ============================================================
   Theming — dark (default) / light. Driven by <html data-theme>.
   Button colors are tokens so CTAs flip with the theme;
   dark "islands" (hero, CTA bands, footer) keep white buttons
   via a local .pc-inverse token override.
   ============================================================ */
:root { --btn-bg: #FFFFFF; --btn-fg: var(--ac-ink); }

html[data-theme="light"] {
  --bg-1: #FFFFFF;
  --bg-2: #FAF8F4;                       /* warm paper/beige where light-grey sat */
  --border-1: rgba(28,25,20,0.12);
  --border-2: rgba(28,25,20,0.20);
  --fg-1: #171512;
  --fg-2: rgba(28,25,20,0.72);
  --fg-3: rgba(28,25,20,0.54);
  --fg-4: rgba(28,25,20,0.40);
  --btn-bg: var(--ac-ink);
  --btn-fg: #FFFFFF;
}

/* Light: subtle white-alpha surfaces become paper/beige (override inline bg) */
html[data-theme="light"] .pc-card,
html[data-theme="light"] .pc-product { background: #FAF8F4 !important; border-color: rgba(28,25,20,0.12) !important; }
html[data-theme="light"] .pc-card:hover,
html[data-theme="light"] .pc-product:hover { background: #F3EFE4 !important; border-color: rgba(28,25,20,0.24) !important; }

/* Light: form fields */
html[data-theme="light"] input,
html[data-theme="light"] textarea { background: #FAF8F4 !important; color: var(--fg-1) !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--fg-4) !important; }

/* Light: journal row hover */
html[data-theme="light"] .pc-entry:hover { background: rgba(28,25,20,0.04) !important; }

/* Light: white client logos invert to read on paper */
html[data-theme="light"] .pc-track img { filter: invert(1); }

/* Dark "islands" keep white buttons even in light mode */
html[data-theme="light"] .pc-inverse { --btn-bg: #FFFFFF; --btn-fg: var(--ac-ink); }

/* Light: misc panels/menus that use literal dark or white-alpha fills */
html[data-theme="light"] .pc-surface { background: #FAF8F4 !important; border-color: rgba(28,25,20,0.12) !important; }
html[data-theme="light"] .pc-menu { background: #FFFFFF !important; border-color: rgba(28,25,20,0.16) !important; }
html[data-theme="light"] .pc-opt:hover { background: rgba(28,25,20,0.06) !important; }

/* Theme toggle segmented control (lives on the always-dark footer) */
.ps-opt { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
html[data-theme="dark"] .ps-opt-dark,
html[data-theme="light"] .ps-opt-light { background: #FFFFFF; color: var(--ac-ink); }

/* Primary pill buttons — subtle hover: white steps to light grey (dark buttons dim slightly) */
a[style*="var(--btn-bg)"], button[style*="var(--btn-bg)"] { transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a[style*="var(--btn-bg)"]:hover, button[style*="var(--btn-bg)"]:hover { filter: brightness(0.9); }
a[style*="var(--btn-bg)"]:active, button[style*="var(--btn-bg)"]:active { transform: scale(0.99); }

/* Light mode: footer flips to paper like the rest of the page */
html[data-theme="light"] footer[style*="ac-ink"] { background: #FAF8F4 !important; }
html[data-theme="light"] footer[style*="ac-ink"] * { color: rgba(28,25,20,0.7) !important; }
html[data-theme="light"] footer[style*="ac-ink"] a:hover { color: #171512 !important; }
html[data-theme="light"] footer[style*="ac-ink"] [style*="border-top"] { border-top-color: rgba(28,25,20,0.14) !important; }
html[data-theme="light"] footer[style*="ac-ink"] [style*="border:1px"] { border-color: rgba(28,25,20,0.22) !important; }
html[data-theme="light"] footer[style*="ac-ink"] .ps-opt-light { background: #171512 !important; color: #FFFFFF !important; }

/* Mobile: divided tier columns use horizontal rules, not stray vertical ones */
@media (max-width: 600px) {
  [style*="border-right:1px solid var(--border-1)"] { border-right: 0 !important; border-bottom: 1px solid var(--border-1) !important; }
}