/* =============================================================================
   Accanto Decor: design tokens
   Implements the design system in docs/reference/00-design-system.md and tokens.css.
   Enqueue this file FIRST (handle: accanto-tokens). Every other stylesheet
   depends on it. Values were measured at 1440 / 390 on 2026-10-02.

   Breakpoints (CSS variables cannot be used inside @media; use these literals):
     phone ≤500 | 501+   tablet ≤767 | 768+   mobile ≤990 | 991+ (main switch)
     1220/1221   1280   1440   1500/1501   1600   1920   2550
   ============================================================================= */

/* ---------- Font (self-hosted Figtree variable, OFL; see assets/fonts/OFL.txt). Paths are relative to assets/css/ ---------- */
/* Latin (preloaded in <head>) */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2-variations"),
       url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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;
}
/* Latin Extended (names, addresses with accents) */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable-LatinExt.woff2") format("woff2-variations"),
       url("../fonts/Figtree-Variable-LatinExt.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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 {
  /* ---------------------------------------------------------------- Typeface */
  --font-sans: "Figtree", "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-regular: 400;   /* spec 400 */
  --fw-medium: 550;    /* spec 500 (Figtree variable). Use 500 if a static font is loaded. */
  --fw-bold: 700;      /* spec 700 */

  /* Letter-spacing. Figtree caps are about 5.5 % narrower than the reference face (00 §1.2), so caps get +0.033em. */
  --ls-heading: -0.02em;     /* all headings */
  --ls-stat: -0.01em;        /* big numbers */
  --ls-none: 0;
  --ls-chip: 0.02em;         /* chips, checkbox labels, select (spec .02em) */
  --ls-caps: 0.07em;         /* spec .04em: .t-ttu, buttons, footer titles */
  --ls-caps-tight: 0.03em;   /* spec 0: nav, crumbs, ticker (uppercase without tracking) */
  --ls-caps-chip: 0.05em;    /* spec .02em uppercase chips */
  --ls-caps-wide: 0.11em;    /* spec .08em: .card__label */

  /* Line heights */
  --lh-heading: 0.96;
  --lh-body: 1.6;
  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-copy-sm: 1.5;
  --lh-ui: 1.3;

  /* Static sizes */
  --fs-body: 16px;           /* 18px at ≥1600 (see media block) */
  --fs-body-sm: 14px;        /* mobile copy (14/1.5) */
  --fs-lead: 24px;           /* feature titles 24/500/1 (mobile 18) */
  --fs-card-title: 20px;     /* service card titles 20/700/1 (mobile 18) */
  --fs-stat: 48px;           /* count-up numbers (mobile ~36.5) */
  --fs-price: 18px;          /* card price 18/700 (mobile 16) */
  --fs-price-lg: 24px;       /* product price 24/700 */
  --fs-input: 18px;          /* underline inputs, textarea */
  --fs-16: 16px;
  --fs-14: 14px;             /* chips, link--underline, notify, hint */
  --fs-13: 13px;             /* header phone (700) */
  --fs-12: 12px;             /* .t-ttu caps labels, sku label, stock, spec labels, price unit */
  --fs-10: 10px;             /* buttons, header nav, breadcrumbs */
  --fs-9: 9px;               /* cart count */
  --fs-8: 8px;               /* "3D" badge */
  --fs-btn: 10px;
  --fs-btn-outlined: 12px;

  /* Fluid heading sizes (piecewise formulas, 00 §2.1). Base = <320px. */
  --fs-h1: 34px;
  --fs-h2: 34px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-catalog-title: 34px;  /* 45.51px @1440 */
  --fs-hero: var(--fs-h1);   /* hero title: 64 @1440, forced 32 at ≤990 */

  /* ---------------------------------------------------------------- Colour: ink and neutrals */
  --c-ink: #1f2020;
  --c-ink-rgb: 31, 32, 32;
  --c-black: #000000;
  --c-white: #ffffff;
  --c-ink-90: rgba(31, 32, 32, 0.9);
  --c-ink-80: rgba(31, 32, 32, 0.8);
  --c-ink-70: rgba(31, 32, 32, 0.7);
  --c-ink-60: rgba(31, 32, 32, 0.6);
  --c-ink-50: rgba(31, 32, 32, 0.5);
  --c-ink-40: rgba(31, 32, 32, 0.4);
  --c-ink-30: rgba(31, 32, 32, 0.3);
  --c-ink-20: rgba(31, 32, 32, 0.2);
  --c-ink-10: rgba(31, 32, 32, 0.1);
  --c-ink-08: rgba(31, 32, 32, 0.08);
  --c-ink-06: rgba(31, 32, 32, 0.06);

  --c-text: var(--c-ink);
  --c-text-muted: var(--c-ink-60);     /* spec labels */
  --c-text-subtle: var(--c-ink-30);    /* crumbs, sku label */
  --c-placeholder: var(--c-ink-40);
  --c-bg: var(--c-white);

  /* Lines */
  --c-line: var(--c-ink-10);                     /* main hairline */
  --c-line-strong: var(--c-ink-20);              /* pagination */
  --c-line-input: rgba(48, 48, 48, 0.1);         /* input underline */
  --c-line-select: #efefef;
  --c-line-footer: rgba(196, 196, 196, 0.2);     /* footer / accordion rules */
  --c-line-checkbox: #dddddd;
  --c-line-black-10: rgba(0, 0, 0, 0.1);         /* crumbs pill, swiper scrollbar */

  /* Surfaces */
  --c-surface-50: #fbfbfb;    /* product buy-box column */
  --c-surface-100: #f6f6f6;   /* menu-btn / cart discs */
  --c-surface-150: #f5f5f5;   /* ticker band, slider areas */
  --c-surface-200: #f2f2f2;   /* grey button, back-to-top */
  --c-surface-250: #f3f3f3;
  --c-surface-300: #ececec;   /* calculator / properties panels */
  --c-surface-350: #e2e2e2;   /* error notify */
  --c-surface-hover: #cccccc; /* back-to-top hover */
  --c-crumb-dot: #cbcbcb;
  --c-cookie: #333333;
  --c-option-hover: #e5e5e5;  /* select option highlight */

  /* Warm brand neutrals */
  --c-beige: #f5eeea;         /* overlay menu bg, default toggle track, chip default */
  --c-taupe-light: #e3dad4;   /* step cards */
  --c-taupe: #d6cec9;         /* hero bg placeholder, hero CTA fill */
  --c-terracotta: #a84f43;    /* "Sample Service" promo tile */

  /* Sage family (default accent family) */
  --c-sage-mist: #dfe7e0;     /* accent green main */
  --c-sage-pale: #dce5dc;     /* notify, pill link */
  --c-sage-light: #bfcbb7;    /* accent green active, cart hover */
  --c-sage: #b0c5b0;          /* btn--olive, olive chip, modal top border */
  --c-sage-dark: #81a281;     /* checked checkbox, chip hover */
  --c-sage-deep: #5b826b;     /* dark-green CTA / chip */

  /* Status */
  --c-stock: #7bb899;         /* in stock text and dots, tag--green */
  --c-link-green: #499d70;
  --c-link-green-10: rgba(73, 157, 112, 0.1);
  --c-success: #00a650;
  --c-red: #c1555a;           /* form errors, btn--red, tag--red */
  --c-error: #f44c4c;         /* invalid input */
  --c-sale: #d06e72;          /* sale badge */
  --c-sale-light: #f6d1d1;
  --c-danger-strong: #e1291b;
  --c-tag-yellow: #e8cca2;
  --c-tag-purple: #b9b3d1;
  --c-cream: #f6f3e7;

  /* Overlays and scrims */
  --overlay-modal: rgba(31, 32, 32, 0.9);
  --overlay-aside: rgba(0, 0, 0, 0.9);
  --overlay-select: rgba(0, 0, 0, 0.7);
  --scrim-hero: rgba(0, 0, 0, 0.4);
  --scrim-news: rgba(31, 32, 32, 0.8);
  --glass-white-20: rgba(255, 255, 255, 0.2);
  --glass-white-60: rgba(255, 255, 255, 0.6);
  --glass-white-80: rgba(255, 255, 255, 0.8);
  --toast-bg: rgba(22, 22, 26, 0.88);
  --toast-bg-hover: rgba(32, 32, 38, 0.92);

  /* ---------------------------------------------------------------- Category accent pairs */
  --accent-green-main: #dfe7e0;   --accent-green-active: #bfcbb7;    /* Wall Panels (default) */
  --accent-beige-main: #f5eeea;   --accent-beige-active: #d6cec9;    /* Fluted Wall Panels */
  --accent-blue-main: #dfe4e7;    --accent-blue-active: #c3cfd8;     /* Aluminium Profiles */
  --accent-purple-main: #ded9e5;  --accent-purple-active: #c0b8cc;   /* Tools & Accessories */
  --accent-rose-main: #eadfdf;    --accent-rose-active: #d0adad;     /* Sale */
  --cat-main: var(--accent-green-main);       /* light: tracks, stepper buttons, switcher bg */
  --cat-active: var(--accent-green-active);   /* mid: title underline, active segment, info panel */

  /* ---------------------------------------------------------------- Buttons */
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white);
  --btn-h: 56px;
  --btn-h-md: 48px;
  --btn-h-sm: 40px;
  --btn-w: 240px;               /* 224px at ≤500 */
  --btn-w-card: 224px;
  --btn-px: 24px;
  --btn-radius: 0;
  --btn-radius-bordered: 4px;
  --btn-bg-beige: #d6cec9;
  --btn-bg-olive: #b0c5b0;
  --btn-bg-green: #bfcbb7;
  --btn-bg-grey: #f2f2f2;
  --btn-bg-brown: #d0adad;
  --btn-bg-purple: #c0b8cc;
  --btn-bg-red: #c1555a;
  --btn-bg-deep: #5b826b;
  --btn-bg-glass: rgba(255, 255, 255, 0.2);

  /* Controls */
  --pill-h: 40px;
  --chip-h: 40px;
  --chip-h-sm: 32px;
  --chip-px: 16px;
  --tag-h: 24px;
  --checkbox-size: 20px;
  --toggle-w: 40px;
  --toggle-h: 24px;
  --toggle-knob: 10px;
  --switcher-seg-h: 24px;
  --stepper-btn-w: 60px;        /* product page (40px elsewhere) */
  --stepper-btn-h: 24px;
  --pagen-w: 48px;
  --pagen-h: 56px;
  --icon-disc: 32px;            /* menu button */
  --icon-disc-sm: 24px;         /* cart count, link--back, slider-btn */
  --icon-circle-lg: 48px;       /* 3D button, download */
  --backtop-size: 50px;
  --sale-badge: 64px;           /* 40px at ≤767 */
  --stock-dot: 8px;
  --title-line-h: 6px;          /* 4px at ≤500 */

  /* Icons */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;
  --icon-2xl: 24px;
  --icon-feature: 48px;
  --icon-stroke: 1.5;

  /* ---------------------------------------------------------------- Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-26: 104px;
  --space-30: 120px;
  --space-36: 144px;
  --space-40: 160px;
  --space-50: 200px;

  /* Section rhythm (desktop ≥991; overridden at ≤990) */
  --section-y-sm: 80px;
  --section-y: 104px;
  --section-y-lg: 144px;
  --section-y-xl: 160px;
  --footer-pt: 136px;
  --footer-pb: 72px;
  --crumbs-pt: 24px;
  --crumbs-mb: 30px;
  --card-gap: 24px;             /* product grid gutter */
  --card-row-gap: 48px;

  /* ---------------------------------------------------------------- Container and 12-col grid */
  --unit: 4.166666666666667vw;  /* side padding: 60px @1440, 80px @1920; 24px at ≤500 */
  --grid-width: 1760;
  --grid-column-width: 125;
  --grid-columns: 12;
  --grid-gutters: calc(var(--grid-columns) - 1);
  --column-proportion: calc(var(--grid-column-width) / var(--grid-width));
  --gutter-proportion: calc((1 - var(--grid-columns) * var(--column-proportion)) / var(--grid-gutters));
  --container-width: calc(100vw - var(--unit) * 2);
  --column-unit: calc(var(--column-proportion) * var(--container-width));          /* 93.75px @1440 */
  --gutter-unit: calc(var(--gutter-proportion) * var(--container-width));          /* 17.73px @1440 */
  --column-and-gutter-unit: calc(var(--column-unit) + var(--gutter-unit));         /* 111.48px @1440 */
  --aside-w: calc(2 * var(--column-and-gutter-unit));                              /* filter sidebar / logo cell: 222.96px @1440 */
  --header-h: 97px;             /* JS should set the real value (65px at ≤990) */

  /* ---------------------------------------------------------------- Radii */
  --r-0: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-tag: 24px;
  --r-pill: 40px;
  --r-round: 50%;

  /* ---------------------------------------------------------------- Shadows (the UI is flat; use sparingly) */
  --shadow-none: none;
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.16);
  --shadow-pop: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-dropdown: 0 4px 10px rgba(0, 0, 0, 0.15);
  --shadow-menu: 0 0.3em 0.5em rgba(0, 0, 0, 0.1);
  --shadow-hint: 0 0 10px rgba(31, 32, 32, 0.1);
  --shadow-basket: 0 -5px 8px rgba(31, 32, 32, 0.07);
  --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.35);
  --focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-ink);

  /* ---------------------------------------------------------------- Motion */
  --ease: ease;
  --ease-expo: cubic-bezier(0.785, 0.135, 0.15, 0.86);   /* easeInOutCirc: button wipe, modals, menu, title underline */
  --ease-io: cubic-bezier(0.645, 0.045, 0.355, 1);       /* easeInOutCubic: header, fade reveal, floating labels */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);       /* easeOutCubic: fadeup reveal, list slide-ins */
  --ease-hero: cubic-bezier(0.51, 0, 0.19, 0.99);        /* hero content entrance */
  --ease-line: cubic-bezier(0.73, 0.13, 0.12, 1);        /* scaleX line reveals */
  --ease-toast: cubic-bezier(0.22, 1, 0.36, 1);          /* toast in */
  --ease-press: cubic-bezier(0.33, 1, 0.68, 1);          /* add-to-basket press */
  --dur-1: 0.25s;   /* UI hover default */
  --dur-2: 0.4s;    /* header, menu btn, modals, back-to-top, hint */
  --dur-3: 0.6s;    /* button wipe, title underline, fade reveal */
  --dur-4: 1s;      /* fadeup, image zoom, scaleX */
  --dur-toast: 0.38s;
  --dur-press: 0.22s;
  --btn-wipe-delay: 0.3s;
  --reveal-shift: 64px;         /* fadeup start offset */
  --reveal-stagger: 0.05s;      /* per-item --delay step in grouped reveals */
  --hover-dim: 0.4;             /* nav / switcher hover opacity */
  --img-hover-scale: 1.1;
  --ticker-speed: 60px;         /* px per second (1px/frame) */

  /* ---------------------------------------------------------------- Z-index */
  --z-below: -1;
  --z-raised: 1;
  --z-float: 2;
  --z-sticky: 50;
  --z-backtop: 80;
  --z-menu: 90;
  --z-header: 100;
  --z-modal: 110;
  --z-search: 120;
  --z-cookie: 105;   /* above the header, below modals and lightboxes */
  --z-dropdown-overlay: 140;
  --z-dropdown: 141;
  --z-toast: 200;
  --z-skiplink: 300;

  /* ---------------------------------------------------------------- Scrollbar */
  --scrollbar-size: 4px;
  --scrollbar-thumb: var(--c-ink);
}

/* ============================================================ Responsive token overrides */

/* Fluid headings: mobile segments */
@media (min-width: 320px) {
  :root {
    --fs-h1: calc(10.90909vw - 0.90909px);
    --fs-h2: calc(10.90909vw - 0.90909px);
    --fs-h3: calc(1.33929vw + 25.71429px);
    --fs-h4: calc(1.33929vw + 19.71429px);
    --fs-catalog-title: calc(10.90909vw - 0.90909px);
  }
}
@media (min-width: 375px) {
  :root {
    --fs-h1: calc(2.03562vw + 32.36641px);
    --fs-h2: calc(2.03562vw + 32.36641px);
    --fs-catalog-title: calc(0.5178vw + 38.0583px);
  }
}
@media (min-width: 768px) {
  :root {
    --fs-h1: calc(3.125vw + 24px);
    --fs-h2: 48px;
    --fs-h3: 36px;
    --fs-h4: 30px;
  }
}
@media (min-width: 1280px) {
  :root {
    --fs-h1: 64px;
    --fs-h5: calc(2.5vw - 12px);
  }
}
@media (min-width: 1440px) {
  :root {
    --fs-h1: calc(1.66667vw + 40px);
    --fs-h2: 3.33333vw;
    --fs-h3: 2.5vw;
    --fs-h4: calc(1.25vw + 12px);
    --fs-h5: 24px;
  }
}
@media (min-width: 1600px) {
  :root { --fs-body: 18px; }
}
@media (min-width: 1920px) {
  :root {
    --fs-h1: calc(1.26984vw + 47.61905px);
    --fs-h2: calc(1.26984vw + 39.61905px);
    --fs-h3: calc(1.26984vw + 23.61905px);
    --fs-h4: 36px;
    --fs-h5: calc(0.31746vw + 17.90476px);
    --fs-catalog-title: calc(1.26984vw + 23.61905px);
  }
}
@media (min-width: 2550px) {
  :root {
    --fs-h1: 80px;
    --fs-h2: 72px;
    --fs-h3: 56px;
    --fs-h5: 26px;
    --fs-catalog-title: 56px;
  }
}

/* Main layout switch (≤990): mobile header, stacked layouts */
@media (max-width: 990px) {
  :root {
    --fs-hero: 32px;
    --section-y-sm: 48px;
    --section-y: 64px;
    --section-y-lg: 64px;
    --section-y-xl: 80px;
    --footer-pt: 40px;
    --footer-pb: 32px;
    --header-h: 65px;
  }
}

/* Tablet portrait (≤767) */
@media (max-width: 767px) {
  :root {
    --sale-badge: 40px;
    --fs-price: 16px;
    --fs-lead: 18px;
    --fs-card-title: 18px;
  }
}

/* Phone (≤500) */
@media (max-width: 500px) {
  :root {
    --unit: 24px;
    --btn-w: 224px;
    --title-line-h: 4px;
    --card-gap: 16px;
    --card-row-gap: 32px;
  }
}

/* Reduced motion: keep states, drop movement */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01s;
    --dur-2: 0.01s;
    --dur-3: 0.01s;
    --dur-4: 0.01s;
    --dur-toast: 0.01s;
    --dur-press: 0s;
    --btn-wipe-delay: 0s;
    --reveal-shift: 0px;
    --reveal-stagger: 0s;
    --img-hover-scale: 1;
  }
}

/* ============================================================ Category accent themes
   Put on <body> (via the body_class filter) or on a section wrapper.
   They switch the --cat-main / --cat-active pair used by the title underline,
   switcher, toggles, stepper, info panel and chips. */
.accent--green  { --cat-main: var(--accent-green-main);  --cat-active: var(--accent-green-active); }
.accent--beige  { --cat-main: var(--accent-beige-main);  --cat-active: var(--accent-beige-active); }
.accent--blue   { --cat-main: var(--accent-blue-main);   --cat-active: var(--accent-blue-active); }
.accent--purple { --cat-main: var(--accent-purple-main); --cat-active: var(--accent-purple-active); }
.accent--rose   { --cat-main: var(--accent-rose-main);   --cat-active: var(--accent-rose-active); }

/* ============================================================ Minimal global application of tokens
   (base element rules every template relies on. Component CSS lives elsewhere.) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  overflow-x: hidden;
}