/* ================================================================
   tokens.css — Erli.de design tokens + variable fonts
   Source of truth: design-system/design.md sekcje 3.1–3.8 + 8.6
   ================================================================ */

/* ============ VARIABLE FONTS (self-hosted, DSGVO-safe) ============ */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2-variations");
  font-weight: 100 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+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Flex";
  src: url("/assets/fonts/roboto-flex-latin.woff2") format("woff2-variations");
  font-weight: 100 1000;
  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+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Flex";
  src: url("/assets/fonts/roboto-flex-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ============ BRAND PRIMARY (teal-blue scale) ============ */
  --color-primary-50:  #ddecf0;
  --color-primary-100: #c4e2ea;
  --color-primary-200: #93cfde;
  --color-primary-300: #62bdd3;
  --color-primary-400: #31aac7;
  --color-primary-500: #0097bc;  /* PRIMARY — brand identity */
  --color-primary-600: #007996;
  --color-primary-700: #005b71;
  --color-primary-800: #003c4b;
  --color-primary-900: #001e26;
  --color-primary: var(--color-primary-500);

  /* ============ BRAND SECONDARY (golden yellow — promotional) ============ */
  --color-secondary-50:  #f6f3e2;
  --color-secondary-100: #f7f0ce;
  --color-secondary-200: #f9eaa6;
  --color-secondary-300: #fae57f;
  --color-secondary-400: #fcdf57;
  --color-secondary-500: #feda30;  /* SECONDARY — sale, promo, badges */
  --color-secondary-600: #cbae26;
  --color-secondary-700: #98831d;
  --color-secondary-800: #665713;
  --color-secondary-900: #332c0a;
  --color-secondary: var(--color-secondary-500);

  /* ============ TERTIARY (cyan — ErliPRO sub-brand) ============ */
  --color-tertiary-50:  #ddf1f1;
  --color-tertiary-500: #00c7cc;
  --color-tertiary-600: #009fa3;
  --color-tertiary-700: #00777a;
  --color-tertiary: var(--color-tertiary-500);

  /* ============ SEMANTIC ============ */
  --color-success-50:  #e5eee7;
  --color-success-100: #d4e7d7;
  --color-success-500: #4ead61;  /* decorative only — fails 3:1 */
  --color-success-600: #3e8a4e;

  --color-warning-50:  #f6ebdd;
  --color-warning-100: #f7dfc4;
  --color-warning-500: #ff8900;  /* decorative only — fails 3:1 */
  --color-warning-600: #cc6e00;

  --color-error-50:  #f1e3e2;
  --color-error-100: #edd0cd;
  --color-error-500: #cd3b2f;  /* AA — usable as text */
  --color-error-600: #a42f26;

  /* ============ NEUTRALS ============ */
  --color-neutral-25:  #fafafa;  /* lighter than 50 — for ultra-soft surfaces (review cards) */
  --color-neutral-50:  #f4f4f4;
  --color-neutral-75:  #ececec;
  --color-neutral-100: #e2e2e2;
  --color-neutral-200: #cfcfcf;
  --color-neutral-300: #bcbcbc;  /* disabled text */
  --color-neutral-400: #a9a9a9;
  --color-neutral-500: #969696;
  --color-neutral-600: #787878;  /* input border-strong dla AA UI */
  --color-neutral-700: #5a5a5a;  /* secondary text, input label */
  --color-neutral-800: #3c3c3c;  /* tertiary heading */

  /* ============ BASE ============ */
  --color-black:      #1a1a1a;   /* primary text — 17.41:1 AAA */
  --color-white:      #ffffff;
  --color-background: var(--color-neutral-50);  /* #f4f4f4 — page bg */
  --color-surface:    var(--color-white);

  /* ============ SPECIAL ============ */
  --color-price-red:    #d02112;  /* discounted prices */
  --color-yellow-title: #ffc70e;  /* promotional headings */

  /* ============ SEMANTIC ALIASES ============ */
  --color-text-primary:    var(--color-black);
  --color-text-secondary:  var(--color-neutral-800);
  --color-text-muted:      var(--color-neutral-700);
  --color-text-disabled:   var(--color-neutral-300);
  --color-text-on-brand:   var(--color-white);
  --color-text-on-yellow:  var(--color-black);

  --color-link:        var(--color-primary-700);
  --color-link-hover:  var(--color-primary-800);

  --color-border:         var(--color-neutral-100);
  --color-border-strong:  var(--color-neutral-600);
  --color-border-brand:   var(--color-primary-600);

  --color-focus-ring: var(--color-primary-700);

  --color-scrollbar-thumb: var(--color-primary-500);
  --color-scrollbar-track: var(--color-neutral-75);

  /* ============ GRADIENTS (brand DNA) ============ */
  --gradient-brand-vivid: linear-gradient(276.11deg, #0097bc 0%, #00b3bc 100%);
  --gradient-primary: linear-gradient(276.11deg, #0097bc 0%, #00b3bc 100%);
  --gradient-primary-hover: linear-gradient(276.11deg, #007996 0%, #008f96 100%);
  --gradient-primary-active: var(--color-primary-700);
  --gradient-secondary: linear-gradient(246.57deg, #f0bf00 0%, #fff063 100%);

  /* ============ TYPOGRAPHY ============ */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:    "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Roboto Mono", "SF Mono", Consolas, monospace;

  --text-h1:       clamp(1.5rem,   1rem    + 2.5vw,    2.625rem);
  --text-h2:       clamp(1.375rem, 1rem    + 1.875vw,  2rem);
  --text-h3:       clamp(1.375rem, 1.125rem + 1.25vw,  1.75rem);
  --text-h4:       clamp(1.25rem,  1rem    + 1.25vw,   1.5rem);
  --text-h5:       clamp(1.125rem, 1rem    + 0.625vw,  1.375rem);
  --text-h6:       clamp(1rem,     0.95rem + 0.25vw,   1.125rem);

  --text-body-lg:  clamp(0.875rem, 0.85rem + 0.125vw,  1rem);
  --text-body-md:  clamp(0.8125rem, 0.8rem + 0.0625vw, 0.875rem);
  --text-caption-1: clamp(0.75rem, 0.74rem + 0.0625vw, 0.8125rem);
  --text-caption-2: clamp(0.625rem, 0.6rem + 0.125vw,  0.75rem);
  --text-overline: 0.625rem;

  --text-display-lg: clamp(2rem, 1.25rem + 3.75vw, 3.5rem);
  --text-display-xl: clamp(2.625rem, 1.5rem + 5.625vw, 4.5rem);

  --leading-heading: 1.35;
  --leading-body:    1.5;
  --leading-tight:   1.2;

  --tracking-overline: 0.05em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  --weight-regular: 400;
  --weight-bold:    700;

  /* ============ SPACING ============ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --container-gap-mobile:  8px;
  --container-gap-tablet:  16px;
  --container-gap-desktop: 32px;

  --max-content-width:      1344px;
  --max-wide-content-width: 1584px;

  --section-padding-block:  clamp(48px, 6vw, 96px);
  --section-padding-inline: clamp(8px, 4vw, 32px);

  /* ============ RADIUS ============ */
  --radius-sm:    3px;
  --radius:       4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  /* Design v3 — większe radii dla premium cards / panels (świadome zerwanie z v2.2) */
  --radius-2xl:   28px;
  --radius-3xl:   40px;
  --radius-full:  9999px;

  /* ============ COMPONENT PADDING ============
     Reusable padding tokens — DRY dla cards/panels/sections.
     Use: padding: var(--padding-card-comfort); */
  --padding-card-cozy:    var(--space-6);                          /* 24px — compact cards */
  --padding-card-default: var(--space-8);                          /* 32px — standard cards (review, trust) */
  --padding-card-comfort: clamp(var(--space-8), 3vw, var(--space-12)) clamp(var(--space-8), 5vw, var(--space-20));   /* 32-48px vertical / 32-80px horizontal — generous panels (CTA, hero card) */
  --padding-section:      var(--space-16) 0;                        /* 64px block padding dla section wrappers */

  /* ============ SHADOWS ============ */
  --shadow-header:   0 2px 5px 0 rgba(26, 26, 26, 0.09);
  --shadow-dropdown: -4px 4px 12px 0 rgba(26, 26, 26, 0.12);
  --shadow-modal:    0 2px 7px 2px rgba(26, 26, 26, 0.14);
  --shadow-popover:  1px 1px 3px rgba(26, 26, 26, 0.25);

  --shadow-level-1: var(--shadow-header);
  --shadow-level-2: var(--shadow-dropdown);
  --shadow-level-3: var(--shadow-modal);

  --shadow-card-hover: 0 4px 12px 0 rgba(26, 26, 26, 0.10);

  --shadow-focus: 0 0 0 2px var(--color-primary-100);
  --shadow-focus-error: 0 0 0 2px var(--color-error-100);
  --shadow-focus-success: 0 0 0 2px var(--color-success-100);

  /* ============ BREAKPOINTS (reference values; media queries muszą używać literałów) ============ */
  --bp-mobile:        360px;
  --bp-tablet:        768px;
  --bp-desktop:       1025px;
  --bp-large:         1440px;
  --bp-extra-large:   1648px;

  /* ============ MOTION ============ */
  --duration-fast:    100ms;
  --duration-default: 150ms;
  --duration-medium:  200ms;
  --duration-slow:    250ms;

  --ease-default: ease-in-out;
  --ease-in:      ease-in;
  --ease-out:     ease-out;

  --spinner: 1s linear infinite;

  --motion-default: var(--duration-default) var(--ease-default);
  --motion-medium:  var(--duration-medium)  var(--ease-default);

  /* ============ Z-INDEX ============ */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-popover:   1100;
  --z-toast:     1200;
  --z-skip-link: 9000;
}

/* ================================================================
   ALIAS LAYER — Etap 2C visual redesign naming bridge
   Mapuje nazewnictwo użyte w briefie redesign na istniejące tokeny
   z design.md. Source of truth pozostaje design.md sekcja 3.
   --radius-xl: 16px — odejście od design.md 3.4 (max 8px) świadomie,
   za zgodą użytkownika dla "premium card" look.
   ================================================================ */
:root {
  /* Color aliases */
  --color-brand-primary:    var(--color-primary-500);
  --color-brand-primary-700: var(--color-primary-700);
  --color-surface-base:     var(--color-white);
  --color-surface-alt:      var(--color-neutral-50);
  --color-border-default:   var(--color-border);

  /* ============ v3 SURFACE TONES ============ */
  --color-surface-soft:     var(--color-neutral-25);    /* #fafafa — ultra-soft, subtle differentiation od białej sekcji */
  --color-surface-elevated: var(--color-white);
  --color-surface-brand:    var(--color-primary-600);   /* 5.03:1 vs white AA — vs primary-500 3.41:1 fails AA */
  --color-surface-yellow:   var(--color-secondary-500);
  --color-surface-inverse:  var(--color-text-primary);

  /* ============ v3 AVATAR PALETTE ============
     6 brand-aligned kolorów dla avatar-inicjałów w opiniach.
     Wszystkie ≥4.5:1 vs ich on-* color (WCAG AA dla 12px text). */
  --color-avatar-1-bg:      var(--color-primary-600);    /* teal — 5.03:1 vs white */
  --color-avatar-1-on:      var(--color-white);
  --color-avatar-2-bg:      var(--color-accent-yellow);  /* yellow — 12.69:1 vs black */
  --color-avatar-2-on:      var(--color-on-yellow);
  --color-avatar-3-bg:      var(--color-tertiary-700);   /* dark cyan #00777a ~5.4:1 */
  --color-avatar-3-on:      var(--color-white);
  --color-avatar-4-bg:      var(--color-success-600);    /* forest green #3e8a4e ~4.7:1 */
  --color-avatar-4-on:      var(--color-white);
  --color-avatar-5-bg:      var(--color-error-600);      /* brick red #a42f26 ~6.2:1 */
  --color-avatar-5-on:      var(--color-white);
  --color-avatar-6-bg:      var(--color-primary-800);    /* darkest teal #003c4b ~12.3:1 */
  --color-avatar-6-on:      var(--color-white);

  /* ============ v3 YELLOW SEMANTIC ============ */
  --color-accent-yellow:    var(--color-secondary-500);   /* #feda30 */
  --color-on-yellow:        var(--color-text-primary);    /* black, 12.69:1 AAA */
  --highlight-yellow:       var(--color-accent-yellow);
  --highlight-offset:       -0.05em;
  --highlight-height:       0.5em;
  --highlight-skew:         0deg;

  /* Numeric spacing scale (multiples of 4px) */
  --space-1:   4px;
  --space-1-5: 6px;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Tailwind-ish text aliases mapped to design.md fluid scale */
  --text-xs:    var(--text-caption-2);   /* 10-12px */
  --text-sm:    var(--text-body-md);     /* 13-14px */
  --text-base:  var(--text-body-lg);     /* 14-16px */
  --text-lg:    var(--text-h6);          /* 16-18px */
  --text-xl:    var(--text-h5);          /* 18-22px */
  --text-2xl:   var(--text-h4);          /* 20-24px */
  --text-3xl:   var(--text-h3);          /* 22-28px */

  /* Premium-card radius (briefem 16px — extension poza design.md 3.4) */
  --radius-xl: 20px;   /* design v3 — odejście od v2.2 8px, premium card look */
}

/* Smooth <details> height interpolation (Chrome 129+, Firefox 137+) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* OKLCH where supported — perceptually uniform color manipulation */
@supports (color: oklch(0% 0 0)) {
  :root {
    --color-primary:     oklch(63.5% 0.105 215);
    --color-primary-600: oklch(54% 0.10 215);
    --color-primary-700: oklch(43% 0.085 215);
    --color-secondary:   oklch(89% 0.18 95);
    --color-error-500:   oklch(50% 0.18 28);
    --color-text-primary:   oklch(20% 0 0);
    --color-text-secondary: oklch(31% 0 0);
    --color-text-muted:     oklch(45% 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}