/* ==========================================================================
   ALBI HOME — DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for the whole site.
   Every value below was measured from ALBI-HOME-final.fig (node 42:2185,
   "Desktop - 3") or read back from the 1440x9649 export.

   RULE: no component stylesheet may declare a raw colour, font-family,
   radius, duration or z-index. Always reference a token from this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WEBFONTS — self-hosted on purpose.
   Loading fonts from the Google CDN transmits visitor IPs to a US server;
   German courts have treated that as a GDPR breach (LG Munchen I, 3 O 17493/20).
   These are the variable woff2 subsets, served from our own origin.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ========================================================================
     2. COLOUR — RAW PALETTE
     Never used directly in components. Semantic aliases (section 3) point here.
     ======================================================================== */

  /* Brand gold. --gold-500 is the brand mark colour sampled off the design. */
  --gold-700: #9C6E14;
  --gold-600: #B48019;   /* start of every gold gradient */
  --gold-500: #C99A3D;   /* BRAND — nav strip, borders, dots */
  --gold-450: #D3A248;   /* end of the button gradient */
  --gold-400: #E2B85C;   /* headline highlight, hover, links */
  --gold-300: #EDD09A;

  /* Neutrals. Warm-shifted charcoals, not pure grey — they carry a slight
     blue-green bias that keeps the gold reading warm against them. */
  --ink-1000: #000000;   /* nav bar only */
  --ink-950:  #100D0A;   /* hero ground */
  --ink-900:  #12151A;
  --ink-850:  #171A1F;   /* PAGE BACKGROUND — dominant colour of the design */
  --ink-800:  #1C1F24;
  --ink-750:  #222429;   /* raised sections */
  --ink-700:  #2F3031;   /* cards on raised sections */
  --ink-600:  #454749;

  --white: #FFFFFF;
  --white-95: #EFEFEF;

  /* Alpha ramps — for lines, washes and scrims over photography. */
  --a-white-04: rgba(255, 255, 255, .04);
  --a-white-08: rgba(255, 255, 255, .08);
  --a-white-16: rgba(255, 255, 255, .16);
  --a-white-28: rgba(255, 255, 255, .28);
  --a-white-32: rgba(255, 255, 255, .32);
  --a-white-50: rgba(255, 255, 255, .50);
  --a-white-68: rgba(255, 255, 255, .68);
  --a-white-84: rgba(255, 255, 255, .84);
  --a-gold-12:  rgba(226, 184, 92, .12);
  --a-gold-24:  rgba(226, 184, 92, .24);
  --a-gold-40:  rgba(201, 154, 61, .40);
  --a-black-40: rgba(0, 0, 0, .40);
  --a-black-64: rgba(0, 0, 0, .64);
  --a-black-88: rgba(9, 8, 6, .88);   /* lightbox backdrop */

  /* Status. Kept separate from the brand accent so gold never means "success". */
  --success: #4FBF7B;
  --warning: #E0A458;
  --danger:  #E05252;
  --whatsapp: #25D366;

  /* ========================================================================
     3. COLOUR — SEMANTIC ALIASES
     This is what components consume.
     ======================================================================== */
  --bg-page:      var(--ink-850);
  --bg-hero:      var(--ink-950);
  --bg-raised:    var(--ink-750);
  --bg-card:      var(--ink-800);
  --bg-card-alt:  var(--ink-700);
  --bg-nav:       var(--ink-1000);   /* main bar — pure black in the design */
  --bg-nav-util:  #1E1D19;           /* utility strip — warmer, NOT black */
  --bg-panel:     var(--white);      /* the angled logo panel */
  --bg-inset:     var(--a-white-04);
  --bg-filter:    var(--ink-900);    /* Referenzen filter bar — #121519 as drawn */

  /* Contrast measured against --bg-page (#171A1F):
     primary 17.4:1 | secondary 8.5:1 | muted 5.1:1 | accent 9.7:1  — all AA+ */
  --text-primary:   var(--white);
  --text-secondary: var(--a-white-68);
  --text-muted:     var(--a-white-50);
  --text-on-media:  var(--a-white-84);  /* copy over photography — matches the
                                           #D3D3D3 measured in the hero export */
  --text-on-gold:   #141007;         /* 8.8:1 on --gold-450 */
  --text-accent:    var(--gold-400);

  --border-subtle: var(--a-white-08);
  --border-line:   var(--a-white-16);
  --border-strong: var(--a-white-28);
  --border-gold:   var(--gold-500);
  /* Filter chip hairline. Reads #606060 in the export, which is white at 32%
     over the #121519 panel — not the same value as --border-strong. */
  --border-chip:   var(--a-white-32);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);

  /* Gradients */
  --grad-gold:      linear-gradient(90deg, var(--gold-600) 0%, var(--gold-450) 62%);
  --grad-gold-band: linear-gradient(102deg, #B7821C 0%, #DBA852 58%, #C38C2E 100%);
  --grad-hero-scrim: linear-gradient(
    90deg,
    rgba(9, 8, 6, .93) 0%,
    rgba(9, 8, 6, .82) 34%,
    rgba(9, 8, 6, .42) 66%,
    rgba(9, 8, 6, .28) 100%
  );
  --grad-hero-foot: linear-gradient(180deg, transparent 55%, var(--ink-850) 100%);
  /* Hover veil over a gallery tile — weighted to the bottom so the badge in
     the middle stays legible without flattening the whole photograph. */
  --grad-tile-veil: linear-gradient(
    180deg,
    rgba(9, 8, 6, .10) 0%,
    rgba(9, 8, 6, .38) 55%,
    rgba(9, 8, 6, .62) 100%
  );

  /* ========================================================================
     4. TYPOGRAPHY
     Inter Tight  -> display, headings, eyebrows, numerals
     Inter        -> body copy, navigation, UI labels
     ======================================================================== */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

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

  /* Fluid scale. min = 375px viewport, max = the Figma value at 1440px.
     Every clamp() below has a vw term so nothing steps abruptly. */
  --fs-display: clamp(2.125rem, 1.15rem + 4.17vw, 3.75rem);  /* 34 -> 60 */
  --fs-h2:      clamp(1.75rem, 1.25rem + 2.14vw, 2.5rem);    /* 28 -> 40 */
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.64vw, 1.5rem);    /* 20 -> 24 */
  --fs-h4:      clamp(1.0625rem, 1.00rem + 0.27vw, 1.1875rem);
  --fs-eyebrow: clamp(1.0625rem, 0.90rem + 0.71vw, 1.5rem);  /* 17 -> 24 */
  --fs-lead:    clamp(1rem, 0.94rem + 0.27vw, 1.125rem);     /* 16 -> 18 */
  --fs-body:    1rem;                                         /* 16 — never smaller */
  --fs-sm:      0.875rem;                                     /* 14 */
  --fs-xs:      0.8125rem;                                    /* 13 */
  --fs-nav:     1rem;                                         /* 16 */

  --lh-tight: 1.14;
  --lh-snug: 1.28;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-display: -0.022em;
  --ls-tight: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;   /* uppercase eyebrows */

  --measure: 66ch;      /* max line length for running copy */

  /* ========================================================================
     5. SPACE — 4/8pt rhythm
     ======================================================================== */
  --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 */

  --section-y: clamp(3.5rem, 2rem + 6.4vw, 6rem);
  /* Gap between the blocks INSIDE a section — head to content, content to the
     closing CTA panel. 52px at 1440, as drawn in both built sections. Global
     rather than section-local so .cta-panel can be dropped into any section
     and still land on the right rhythm. */
  --section-stack: clamp(2rem, 3.6vw, 3.25rem);

  /* ========================================================================
     6. LAYOUT
     The design is a 1296px content column inside 72px gutters at 1440.
     The gutter shrinks per breakpoint; the max width never changes.
     ======================================================================== */
  --content-max: 1296px;
  --gutter: 1.25rem;               /* 20 — mobile default, overridden below */
  --header-util-h: 50px;           /* gold utility strip */
  --header-main-h: 80px;           /* black bar */
  --header-h: 130px;               /* total, matches Figma exactly */
  --header-h-stuck: 64px;          /* condensed sticky state */

  /* The two diagonals, measured off the export:
     logo panel edge  294px @ y0 -> 236px @ y130  => atan(58/130) = 24.03deg
     utility strip    617px @ y0 -> 641px @ y50   => atan(24/50)  = 25.64deg */
  --skew-panel: -24deg;
  --skew-strip: 26deg;

  /* ========================================================================
     7. RADIUS / ELEVATION
     ======================================================================== */
  --radius-xs: 3px;     /* eyebrow pill */
  --radius-sm: 6px;     /* buttons, WhatsApp CTA */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .72);
  --shadow-nav: 0 12px 32px -12px rgba(0, 0, 0, .8);
  --shadow-gold: 0 8px 28px -10px rgba(201, 154, 61, .55);

  /* ========================================================================
     8. MOTION
     ======================================================================== */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  --dur-fast: 150ms;    /* colour / opacity micro-states */
  --dur-base: 220ms;    /* hover, focus, transform */
  --dur-slow: 320ms;    /* drawer, sticky condense */

  /* ========================================================================
     9. Z-INDEX — a closed scale. Nothing invents its own value.
     ======================================================================== */
  --z-decor: 1;
  --z-content: 2;
  --z-sticky: 100;
  --z-scrim: 900;
  --z-drawer: 950;
  --z-lightbox: 980;    /* over the drawer — it is opened from the page below */
  --z-skiplink: 1000;
}

/* Gutter grows with the viewport, ending on the Figma value of 72px. */
@media (min-width: 480px)  { :root { --gutter: 1.5rem; } }   /* 24 */
@media (min-width: 768px)  { :root { --gutter: 2rem; } }     /* 32 */
@media (min-width: 1024px) { :root { --gutter: 2.5rem; } }   /* 40 */
@media (min-width: 1200px) { :root { --gutter: 3rem; } }     /* 48 */
@media (min-width: 1440px) { :root { --gutter: 4.5rem; } }   /* 72 — as designed */

/* The header shrinks before the nav collapses, so the diagonal never
   dominates a short viewport. */
@media (max-width: 1199.98px) { :root { --header-h: 112px; --header-util-h: 42px; --header-main-h: 70px; } }
@media (max-width: 1023.98px) { :root { --header-h: 76px;  --header-util-h: 0px;  --header-main-h: 76px; } }
@media (max-width: 767.98px)  { :root { --header-h: 68px;  --header-util-h: 0px;  --header-main-h: 68px; } }

/* Honour the OS setting: kill motion, keep every state change legible. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}