/* ============================================================
   Tillex — Design tokens (from the Tillex design system)
   Colors / typography / spacing / effects, consolidated.
   NOTE: the source design imported Arimo from Google Fonts.
   That CDN load is removed here for GDPR/consent reasons — we
   rely on the platform Helvetica stack, with Arial as the
   metric-compatible fallback. To pin Arimo, self-host woff2 and
   add @font-face rules in this file (see functions.php note).
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --tillex-yellow: #FFB81C;
  --tillex-black: #000000;
  --tillex-white: #FFFFFF;

  --tillex-silver: #8A8D8F;
  --tillex-silver-60: #ABADAF;
  --tillex-silver-40: #C8C9CB;
  --tillex-silver-20: #E4E5E6;

  /* ---- Yellow ramp ---- */
  --yellow-700: #C98A00;
  --yellow-600: #E5A100;
  --yellow-500: #FFB81C;
  --yellow-400: #FFC94F;
  --yellow-200: #FFE7AC;
  --yellow-100: #FFF4D6;

  /* ---- Neutral / ink ramp ---- */
  --ink-900: #000000;
  --ink-800: #1A1A1A;
  --ink-700: #333333;
  --ink-600: #4D4D4D;
  --ink-500: #6E7173;
  --ink-400: #8A8D8F;
  --ink-300: #C8C9CB;
  --ink-200: #E4E5E6;
  --ink-100: #F2F3F3;
  --ink-050: #F8F8F8;

  /* ---- Semantic aliases ---- */
  --bg-page: #FFFFFF;
  --bg-subtle: #F8F8F8;
  --bg-inset: #F2F3F3;
  --bg-dark: #000000;
  --surface-card: #FFFFFF;

  --text-heading: #000000;
  --text-body: #1A1A1A;
  --text-muted: #6E7173;
  --text-on-dark: #FFFFFF;
  --text-on-yellow: #000000;
  --text-on-dark-muted: #ABADAF;

  --border-default: #E4E5E6;
  --border-strong: #C8C9CB;
  --border-dark: #000000;

  --accent: #FFB81C;
  --accent-hover: #E5A100;
  --accent-active: #C98A00;

  --link: #000000;
  --link-hover: #C98A00;
  --focus-ring: #FFB81C;

  --success: #2E9E44;
  --warning: #E5A100;
  --danger: #E2231A;
  --info: #1B75BC;

  /* ---- Colour Code System (product colours — size selector UI only) ---- */
  --cc-white: #FFFFFF;
  --cc-yellow: #F4C400;
  --cc-purple: #7B2D8E;
  --cc-red: #E2231A;
  --cc-brown: #6B4226;
  --cc-blue: #1B75BC;
  --cc-green: #2E9E44;
  --cc-grey: #8A8D8F;
  --cc-orange: #F5821F;

  /* ---- Typography ---- */
  --font-sans: "Helvetica Neue", "Helvetica", "Arimo", "Arial", sans-serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-label: 12px;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.14em;
  --ls-caps: 0.06em;

  --heading-family: var(--font-sans);
  --heading-weight: var(--fw-bold);
  --body-family: var(--font-sans);
  --body-weight: var(--fw-light);

  /* ---- Spacing & sizing (8px grid) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container-max: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(16px, 4vw, 24px);
  --section-y: clamp(52px, 7vw, 96px);
  --header-h: 76px;

  --control-h-sm: 34px;
  --control-h-md: 44px;
  --control-h-lg: 54px;

  /* ---- Effects ---- */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-w-strong: 2px;
  --border-hairline: 1px solid var(--border-default);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10);
  --shadow-focus: 0 0 0 3px rgba(255, 184, 28, 0.45);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}