/* ============================================================
   ANK Constructions & Interiors — Core tokens
   Colors + Type for all design surfaces
   ============================================================ */

@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('fonts/ZalandoSansExpanded-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('fonts/ZalandoSansExpanded-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans SemiExpanded';
  src: url('fonts/ZalandoSansSemiExpanded-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans SemiExpanded';
  src: url('fonts/ZalandoSansSemiExpanded-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans SemiExpanded';
  src: url('fonts/ZalandoSansSemiExpanded-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ----------
     Sampled from the ANK mark (champagne gold on ink).
     A warm, quiet luxury palette — gold is the only chromatic note;
     everything else is a neutral drawn from plaster, stone, ink, bronze. */

  /* From brand sheet: Gold #BFAE80 · Champagne #DCD0A9 · Black · White + gradient. */
  --gold-50:  #F7F2E3;   /* palest wash  */
  --gold-100: #ECE2C6;
  --gold-200: #DCD0A9;   /* PRIMARY — Champagne (brand) */
  --gold-300: #CBBC94;
  --gold-400: #BFAE80;   /* PRIMARY — Gold (brand) */
  --gold-500: #A8966A;   /* hover / deeper accent */
  --gold-600: #7E6F4A;
  --gold-700: #54482F;

  /* Neutrals — warm, not blue. Plaster to ink. True black is a brand primary. */
  --ink-900:  #000000;   /* Brand Black */
  --ink-800:  #121210;
  --ink-700:  #1F1C18;
  --ink-600:  #2A2622;
  --stone-500:#6E665D;   /* body text on light */
  --stone-400:#8D867C;
  --stone-300:#B7B0A5;
  --stone-200:#D9D3C7;
  --stone-100:#EDE8DE;
  --plaster:  #F5F1E8;   /* warm off-white surface */
  --bone:     #FBF8F1;   /* brightest surface */
  --white:    #FFFFFF;

  /* Semantic — non-chromatic brand; extended neutrals only. */
  --info:    var(--gold-500);
  --muted:   var(--stone-400);
  --emphasis:var(--ink-900);

  /* ---------- Foreground / surface roles ---------- */
  --fg-1:       var(--ink-900);     /* primary text on light */
  --fg-2:       var(--stone-500);   /* secondary text */
  --fg-3:       var(--stone-400);   /* tertiary / captions */
  --fg-inverse: var(--bone);        /* text on dark */
  --fg-accent:  var(--gold-500);    /* accent link / eyebrow on light */
  --fg-accent-dark: var(--gold-200);/* accent on dark bg (Champagne) */

  --bg-1:       var(--bone);        /* base surface */
  --bg-2:       var(--plaster);     /* raised surface */
  --bg-3:       var(--stone-100);   /* subtle panels */
  --bg-inverse: var(--ink-900);     /* full-bleed dark hero */
  --bg-inverse-2: var(--ink-800);

  --border-1: rgba(20, 18, 16, 0.08);
  --border-2: rgba(20, 18, 16, 0.14);
  --border-inverse: rgba(251, 248, 241, 0.14);
  --border-gold: var(--gold-300);

  /* ---------- Type families ---------- */
  --font-display: 'Zalando Sans SemiExpanded', 'Zalando Sans Expanded', system-ui, sans-serif;
  --font-body:    'Zalando Sans SemiExpanded', 'Zalando Sans Expanded', system-ui, sans-serif;
  --font-wide:    'Zalando Sans Expanded', 'Zalando Sans SemiExpanded', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (luxury editorial — generous) ---------- */
  --fs-eyebrow: 12px;   /* uppercase label */
  --fs-caption: 13px;
  --fs-body-s:  14px;
  --fs-body:    16px;
  --fs-body-l:  18px;
  --fs-h6: 18px;
  --fs-h5: 22px;
  --fs-h4: 28px;
  --fs-h3: 36px;
  --fs-h2: 52px;
  --fs-h1: 72px;
  --fs-hero: 112px;     /* editorial hero, use on landing */

  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-normal:1.35;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --ls-hero:   -0.02em;   /* tight negative on huge type */
  --ls-tight:  -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;   /* eyebrow labels */
  --ls-widest:  0.18em;   /* all-caps monograms */

  /* ---------- Spacing (4-based, luxury = generous) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  --gutter:   32px;
  --rail:     clamp(24px, 5vw, 96px);
  --max-w:    1440px;

  /* ---------- Radii (architectural — minimal rounding) ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, warm, low-contrast) ---------- */
  --shadow-1: 0 1px 2px rgba(20,18,16,0.04), 0 1px 1px rgba(20,18,16,0.03);
  --shadow-2: 0 4px 12px rgba(20,18,16,0.06), 0 2px 4px rgba(20,18,16,0.04);
  --shadow-3: 0 16px 40px rgba(20,18,16,0.10), 0 4px 12px rgba(20,18,16,0.05);
  --shadow-gold: 0 8px 30px rgba(168, 140, 91, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
}

/* ============================================================
   Semantic type presets — apply directly as classes or @extend
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }

.ank-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}
.ank-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.ank-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.ank-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.ank-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}
.ank-h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
}
.ank-h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-normal);
}

.ank-body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}
.ank-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}
.ank-body-s {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ank-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.ank-eyebrow {
  font-family: var(--font-wide);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.ank-monogram {
  font-family: var(--font-wide);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.ank-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
}

.ank-rule-gold {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold-400);
  border: 0;
  margin: var(--s-4) 0;
}