/* ==========================================================================
   Takszu — design tokens
   Extracted from Figma file Web-takszu-1 (gBfIAZHeDKGZ2XWfVgoPj5).

   The Figma file defines only three typography variables (Title / Heading /
   Body text) and no colour variables, so the palette below was read off the
   raw hex values used across the frames. Keep this file the single source of
   truth: no other stylesheet should contain a literal hex colour.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --color-bone:        #f5f0e8;  /* page ground, and type on dark sections */
  --color-ink:         #1e1c1a;  /* body type, and the dark section ground */
  --color-muted:       #6b6660;  /* secondary type, footer                 */
  --color-rule:        #e4ddd3;  /* hairline borders inside page bodies    */
  --color-rule-soft:   rgb(30 28 26 / 0.125); /* chrome + card dividers    */
  --color-rule-faint:  rgb(30 28 26 / 0.2);  /* section separators         */
  --color-ember:       #cc4d0d;  /* multiply wash over the glass image     */
  --color-clay:        #835d4a;  /* accent: index numbers, prices, kickers */
  --color-stock:       #3b7a57;  /* "in stock" availability dot            */

  --color-surface:     var(--color-bone);
  --color-surface-inverse: var(--color-ink);
  --color-text:        var(--color-ink);
  --color-text-inverse: var(--color-bone);

  /* Opacities the design applies to otherwise-solid colours. */
  --opacity-rule:      0.4;   /* the 24px eyebrow dash          */
  --opacity-body:      0.8;   /* discipline body copy           */
  --opacity-hero-body: 0.9;   /* hero paragraph                 */
  --opacity-credit:    0.65;  /* attribution, eyebrows, meta    */
  --opacity-ember:     0.4;   /* ember wash over the glass image */

  /* ---- Typeface ----------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  /* Wordmark and serif headings. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Small-caps labels, nav links, footer column headings. */
  --font-label: "Archivo Narrow", "Arial Narrow", Helvetica, Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale ---------------------------------------------------- */
  /* The ceiling of each clamp is the Figma value, and each vw coefficient is
     chosen so the clamp actually reaches that ceiling at the 1440px frame
     width (e.g. 64/1440 = 4.44vw, so 4.5vw). The floors are ours, since the
     file contains no tablet or mobile frames. */
  --fs-hero:        clamp(2.75rem, 5.6vw, 5rem);      /*  44 -> 80 */
  --fs-display:     clamp(2.25rem, 4.5vw, 4rem);      /*  36 -> 64 */
  --fs-heading:     clamp(1.75rem, 2.8vw, 2.5rem);    /*  28 -> 40 */
  --fs-quote:       clamp(1.5rem, 2.8vw, 2.5rem);     /*  24 -> 40 */
  --fs-wordmark:    clamp(1.5rem, 2.25vw, 2rem);      /*  24 -> 32 */
  --fs-logo:        1.75rem;   /* 28 - navbar wordmark    */
  --fs-nav:         0.8125rem; /* 13 - navbar links       */
  --fs-micro:       0.6875rem; /* 11 - footer baseline, stock badge */
  --fs-meta:        0.8125rem; /* 13 - card descriptions  */
  --fs-lede:        clamp(1.1875rem, 1.67vw, 1.5rem); /*  19 -> 24 (Figma "Subheading") */
  --fs-body-lg:     clamp(1.0625rem, 1.4vw, 1.25rem); /*  17 -> 20 */
  --fs-body:        1.125rem;  /* 18 */
  --fs-body-sm:     1rem;      /* 16 */
  --fs-caption:     0.875rem;  /* 14 */
  --fs-label:       0.75rem;   /* 12 */

  /* ---- Line height --------------------------------------------------- */
  --lh-flush:   1;      /* hero wordmark        */
  --lh-tight:   1.1;    /* discipline headings  */
  --lh-snug:    1.2;    /* display headings     */
  --lh-quote:   1.4;    /* philosophy statement */
  --lh-normal:  1.5;    /* discipline body      */
  --lh-relaxed: 1.6;    /* hero + footer body   */

  /* ---- Letter spacing ------------------------------------------------ */
  --tracking-hero:      0.75em;    /* 12px @ 80px wordmark   */
  --tracking-kicker:    0.25em;    /*  4px @ 16px hero sub   */
  --tracking-label:     0.25em;    /*  3px @ 12px eyebrow    */
  --tracking-nav:       0.1667em;  /*  2px @ 12px nav        */
  --tracking-credit:    0.1429em;  /*  2px @ 14px credit     */
  --tracking-cta:       0.0833em;  /*  1px @ 12px "VER PIEZAS" */
  --tracking-display:   -0.02em;   /* -1.28px @ 64px         */
  --tracking-quote:     -0.025em;  /* -1px @ 40px            */

  /* ---- Space --------------------------------------------------------- */
  --space-12:  0.75rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-36:  2.25rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-60:  3.75rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-90:  5.625rem;
  --space-96:  6rem;
  --space-100: 6.25rem;
  --space-110: 6.875rem;
  --space-120: 7.5rem;
  --space-140: 8.75rem;
  --space-160: 10rem;

  /* ---- Layout -------------------------------------------------------- */
  --wrap-max:    1440px;  /* the Figma frame width                */
  --gutter:      var(--space-64);  /* header, hero, footer        */
  --gutter-wide: var(--space-80);  /* editorial sections          */
  --hero-height: 860px;

  /* The navbar is absolutely positioned on every page; each page's first
     section reserves its own band beneath it. The bar itself is 80px.
     Pages drawn in the earlier system reserve 120px (Figma 3:87, 3:153);
     pages drawn in the current one reserve exactly the bar height. */
  --navbar-height: 80px;
  --header-clearance: 120px;

  /* The chrome sits on a 60px gutter of its own; page bodies keep the
     gutters their own frames specify. */
  --gutter-chrome: 3.75rem;

  /* ---- Misc ---------------------------------------------------------- */
  --hairline: 1px;
  --radius-card: 2px;
  --radius-pill: 999px;
  --shadow-float: 0 2px 8px rgb(0 0 0 / 0.15);
  --transition: 200ms ease;
}

/* The design has no tablet or mobile frames. These reductions are our own,
   chosen to keep the proportions of the 1440 frame rather than to match a
   second design. Revisit if mobile frames are added to the Figma file. */
@media (max-width: 1024px) {
  :root {
    --gutter:      var(--space-40);
    --gutter-wide: var(--space-40);
    --hero-height: 640px;
    --header-clearance: var(--space-80);
    --gutter-chrome: var(--space-40);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter:      var(--space-24);
    --gutter-wide: var(--space-24);
    --hero-height: 560px;
    --tracking-hero: 0.4em;
    --gutter-chrome: var(--space-24);
  }
}