/* anstrich. design tokens — ported verbatim from the design-system bundle
   (colors / typography / spacing / effects / gradients / base). */

/* ---- @font-face ---- */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-Variable.woff2") format("woff2");
}

/* Clash Grotesk — the lowercase display cut, self-hosted (was Fontshare CDN).
   Self-hosting guarantees it loads even when a content blocker or flaky network
   blocks api.fontshare.com; the hero/headline sizing is calibrated to these
   metrics, so a missing display font would otherwise overflow (clipped period). */
@font-face {
  font-family: "Clash Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/clash-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/clash-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/clash-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/clash-grotesk-700.woff2") format("woff2");
}

/* anstrich. — colour
   near-black does the heavy lifting. off-white carries the words.
   the coral accent is used once — for emphasis, never decoration.
   roughly five percent of any layout.
   Source: anstrich brand guidelines v1.0 (june 2026), section 02. */

:root {
  /* ---- base palette (PDF v1.0) ---- */
  --ink-900: #100f0e;   /* ink black — primary background, the brand lives in the dark */
  --ink-800: #181613;   /* panel — cards, surfaces */
  --ink-700: #211e1a;   /* raised panel / hover surface */
  --ink-600: #2c2a26;   /* hairline border */
  --ink-500: #3a3733;   /* stronger border / divider on dark */

  --paper:   #efebe3;   /* off-white — headlines, wordmark, primary text on dark */
  --paper-dim: #d8d3c9; /* off-white pressed / secondary on dark */

  --grey-400: #b3afa6;  /* brighter caption on dark */
  --grey-500: #8c8982;  /* muted grey — body copy, secondary detail, captions */
  --grey-600: #6f6c66;  /* faint meta on dark */

  --coral-500: #e15862; /* coral accent — the period, labels, rules, single highlights */
  --coral-400: #e87079; /* coral hover (lifts on dark) */
  --coral-600: #c8434d; /* coral press */

  /* ---- light surface (Kreide / on-light placements: light social posts, reversed mark) ---- */
  --paper-bg:   #efebe3; /* off-white background */
  --paper-bg-2: #e6e1d7; /* light panel */
  --paper-border: #d3cdc1;

  /* ---- semantic aliases — default theme is dark ---- */
  --bg:            var(--ink-900);
  --surface:       var(--ink-800);
  --surface-raised:var(--ink-700);
  --border:        var(--ink-600);
  --border-strong: var(--ink-500);

  --text:          var(--paper);     /* headlines, wordmark, primary */
  --text-body:     var(--grey-500);  /* body copy — muted grey */
  --text-muted:    var(--grey-600);  /* captions, meta */
  --text-on-coral: var(--ink-900);

  --accent:        var(--coral-500); /* the one highlight */
  --accent-hover:  var(--coral-400);
  --accent-press:  var(--coral-600);
  --period:        var(--coral-500); /* the period in the wordmark, at display sizes */

  --focus-ring:    var(--coral-500);
}

/* on-light scope — opt in with class="on-light" or data-theme="light" */
.on-light,
[data-theme="light"] {
  --bg:            var(--paper-bg);
  --surface:       var(--paper-bg-2);
  --surface-raised:#ffffff;
  --border:        var(--paper-border);
  --border-strong: #c4bdb0;

  --text:          var(--ink-900);
  --text-body:     var(--grey-500);
  --text-muted:    #9a968d;
  --text-on-coral: var(--paper);

  --period:        var(--coral-500);
}

/* anstrich. — typography
   one grotesque, full range. light for display & the wordmark; bold for
   labels and card titles. lowercase everywhere except body copy.
   Source: anstrich brand guidelines v1.0, section 03. */

:root {
  /* family — one humanist grotesque does everything */
  --font-sans: "Hanken Grotesk", "Söhne", "Suisse Int'l", -apple-system,
               "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans); /* same family, light weight */
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* weights */
  --w-light: 300; /* @kind other */     /* display, wordmark */
  --w-regular: 400; /* @kind other */   /* body */
  --w-medium: 500; /* @kind other */
  --w-semibold: 600; /* @kind other */
  --w-bold: 700; /* @kind other */      /* labels, card titles, stats */
  --w-extrabold: 800; /* @kind other */

  /* type scale (px) — display runs large and light; labels run small and bold */
  --t-display-xl: 5.5rem;  /* 88 — hero wordmark / statement */
  --t-display-l:  4rem;    /* 64 — page headline */
  --t-display-m:  3rem;    /* 48 — section headline */
  --t-display-s:  2.25rem; /* 36 — card / sub headline */
  --t-title:      1.5rem;  /* 24 — card title (bold) */
  --t-body-l:     1.125rem;/* 18 — lead body */
  --t-body:       1rem;    /* 16 — body */
  --t-body-s:     0.9375rem;/* 15 — small body */
  --t-label:      0.8125rem;/* 13 — section label / eyebrow (bold, tracked) */
  --t-caption:    0.75rem; /* 12 — caption / meta */

  /* line heights */
  --lh-tight: 1.02; /* @kind other */   /* display — set tight */
  --lh-snug: 1.18; /* @kind other */
  --lh-body: 1.6; /* @kind other */     /* body copy — 1.6 per spec */
  --lh-label: 1.3; /* @kind other */

  /* tracking */
  --tr-tight: -0.02em; /* @kind other */   /* display, lowercase, tight tracking */
  --tr-tighter: -0.03em; /* @kind other */ /* largest display */
  --tr-normal: 0em; /* @kind other */
  --tr-label: 0.14em; /* @kind other */    /* section labels / eyebrows, uppercase-feel via tracking */
}

/* anstrich. — spacing, radius, borders, layout
   considered, intentional. an 8-based rhythm with tight steps for type. */

:root {
  /* spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* radius — sharp and restrained; corners stay tight */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;    /* default for cards, inputs, buttons */
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* borders — the brand leans on hairlines, not fills */
  --border-hairline: 1px solid var(--border);
  --border-strong-1: 1px solid var(--border-strong);
  --rule: 1px solid var(--border); /* the coral / hairline rule */

  /* layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);

  /* clear space — the mark keeps at least its cap-height on all sides */
  --mark-clear: 1em;
}

/* anstrich. — effects
   the brand lives in the dark, so depth comes from hairline borders and
   barely-there shadow, not heavy drop shadows. transitions are quiet. */

:root {
  /* shadows — subtle; on near-black they read as a soft lift, not a float */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  /* a coral focus glow, used sparingly */
  --glow-accent: 0 0 0 3px rgba(225, 88, 98, 0.28);

  /* motion — quiet, considered. fades and short eases; no bounce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* gentle ease-out */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --transition: all var(--dur) var(--ease); /* @kind other */

  /* opacity states */
  --hover-dim: 0.86; /* @kind other */   /* hover on text/icons softens */
  --disabled: 0.4; /* @kind other */

  /* paper grain — optional subtle texture overlay at 5–8% (see guidelines) */
  --grain-opacity: 0.06; /* @kind other */
}

/* anstrich. — expressive layer: atmosphere & gradients
   An OPTIONAL, more modern set of brand elements — coral-ember glow gradients,
   large soft-rounded "screen" panels, and lift glows. This extends the flat,
   restrained v1.0 core (which stays gradient-free); reach for these on heroes,
   waitlist pages, social, and feature surfaces — not body content.
   Coral-adapted from the studio's expressive references. Keep it atmospheric,
   never neon. */

:root {
  /* ---- ember palette (a hotter coral, for glow centres only) ---- */
  --ember-hot: #f0606a;   /* glow core */
  --ember: #e15862;       /* = coral accent */
  --ember-deep: #8f2f37;  /* glow falloff into the dark */

  /* ---- atmospheric backgrounds (place on var(--bg)) ---- */
  /* a single coral bloom rising from one edge */
  --gradient-ember-top:
    radial-gradient(120% 90% at 50% -10%,
      rgba(240, 96, 106, 0.55) 0%,
      rgba(180, 60, 70, 0.22) 28%,
      rgba(16, 15, 14, 0) 62%); /* @kind color */
  /* twin side glows fading to a dark centre — the "midu banner" feel */
  --gradient-ember-sides:
    radial-gradient(60% 120% at 0% 50%, rgba(225, 88, 98, 0.42), transparent 60%),
    radial-gradient(60% 120% at 100% 50%, rgba(225, 88, 98, 0.42), transparent 60%); /* @kind color */
  /* a warm wash anchored bottom-right, for portrait / image overlays */
  --gradient-ember-corner:
    radial-gradient(90% 90% at 85% 80%,
      rgba(240, 96, 106, 0.50) 0%,
      rgba(143, 47, 55, 0.20) 40%,
      rgba(16, 15, 14, 0) 70%); /* @kind color */
  /* full ember field — saturated coral fading to ink, for full-bleed panels */
  --gradient-ember-field:
    radial-gradient(100% 140% at 20% 0%, rgba(240, 96, 106, 0.85), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(143, 47, 55, 0.7), transparent 60%),
    linear-gradient(160deg, #c8434d 0%, #1a1411 70%); /* @kind color */

  /* a quiet coral veil for text-protection over imagery */
  --gradient-veil:
    linear-gradient(180deg, rgba(16, 15, 14, 0) 0%, rgba(16, 15, 14, 0.75) 100%); /* @kind color */

  /* ---- glows (box-shadow) ---- */
  --glow-soft: 0 0 80px rgba(225, 88, 98, 0.25);
  --glow-strong: 0 0 120px rgba(240, 96, 106, 0.45);
  --glow-edge: 0 0 0 1px rgba(225, 88, 98, 0.35), 0 0 60px rgba(225, 88, 98, 0.22);

  /* ---- large soft radii (the modern "screen" / app-tile corners) ---- */
  --radius-xl: 18px;   /* @kind radius */  /* feature cards */
  --radius-2xl: 28px;  /* @kind radius */  /* hero / screen panels */
  --radius-3xl: 44px;  /* @kind radius */  /* full-bleed banners (midu-style) */
}

/* anstrich. — base resets + brand helpers
   global element defaults and a few brand patterns (wordmark, section label,
   coral rule) that recur across every surface. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--coral-500); color: var(--paper); }

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

/* ---- brand patterns ---------------------------------------------------- */

/* the wordmark — always lowercase, light, with the coral period */
.ans-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-tight);
  color: var(--text);
  line-height: 1;
  text-transform: lowercase;
}
.ans-wordmark .dot { color: var(--period); }

/* the a. monogram */
.ans-monogram {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-tight);
  color: var(--text);
  text-transform: lowercase;
}
.ans-monogram .dot { color: var(--period); }

/* section label — 01 — label : numbered, lowercase, em dash, coral, tracked */
.ans-label {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-label);
  color: var(--accent);
  text-transform: lowercase;
}

/* display headline — light, lowercase, tight */
.ans-display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--text);
  text-transform: lowercase;
  text-wrap: balance;
}

/* a thin hairline rule */
.ans-rule { height: 0; border: 0; border-top: var(--rule); }
.ans-rule--coral { border-top-color: var(--accent); }