/*
 * Farmer Strefa design tokens.
 *
 * Source: Figma file "Farmer Strefa", node 127:1761.
 * Keep component CSS mapped to --fs-* tokens. The escaped aliases at the end
 * mirror Figma variable names and make future Figma-to-code snippets easier
 * to normalize.
 */

:root {
  /* Color primitives from Figma. */
  --fs-color-primary: #12481a;
  --fs-color-primary-dark: #08220d;
  --fs-color-white: #ffffff;
  --fs-color-text: #161616;
  --fs-color-background: #ffffff;
  --fs-color-background-muted: #f9f9f9;
  --fs-color-secondary: #d9d9d9;
  --fs-color-secondary-text: #727272;
  --fs-color-gray-500: #6b7280;
  --fs-color-gray-700: #374151;
  --fs-color-lime-700: #4d7c0f;
  --fs-color-yellow-400: #ffde7d;
  --fs-color-yellow-300: #fff0c6;
  --fs-color-yellow-500: #fab601;

  /* Semantic color tokens. */
  --fs-color-page: var(--fs-color-background);
  --fs-color-surface: var(--fs-color-white);
  --fs-color-surface-subtle: var(--fs-color-background);
  --fs-color-surface-muted: var(--fs-color-background-muted);
  --fs-color-surface-inverse: var(--fs-color-primary-dark);

  --fs-color-text-strong: var(--fs-color-text);
  --fs-color-text-muted: var(--fs-color-secondary-text);
  --fs-color-text-subtle: var(--fs-color-gray-500);
  --fs-color-text-inverse: var(--fs-color-white);

  --fs-color-border: var(--fs-color-secondary);
  --fs-color-border-muted: var(--fs-color-background-muted);
  --fs-color-border-strong: var(--fs-color-secondary-text);
  --fs-color-focus: var(--fs-color-primary);

  --fs-color-action: var(--fs-color-primary);
  --fs-color-action-hover: var(--fs-color-primary-dark);
  --fs-color-action-active: var(--fs-color-primary-dark);
  --fs-color-action-subtle: var(--fs-color-background-muted);
  --fs-color-action-border: var(--fs-color-primary);

  --fs-color-success: var(--fs-color-lime-700);
  --fs-color-success-subtle: #f3f8eb;
  --fs-color-warning: #d89b00;
  --fs-color-warning-subtle: var(--fs-color-yellow-300);
  --fs-color-danger: #d83b2f;
  --fs-color-danger-subtle: #fff1f0;

  /* Figma rem scale. */
  --fs-rem-025: 0.25rem;
  --fs-rem-050: 0.5rem;
  --fs-rem-075: 0.75rem;
  --fs-rem-100: 1rem;
  --fs-rem-125: 1.25rem;
  --fs-rem-150: 1.5rem;
  --fs-rem-175: 1.75rem;
  --fs-rem-200: 2rem;
  --fs-rem-250: 2.5rem;
  --fs-rem-300: 3rem;
  --fs-rem-400: 4rem;

  /* Spacing aliases. */
  --fs-space-0: 0;
  --fs-space-1: var(--fs-rem-025);
  --fs-space-2: var(--fs-rem-050);
  --fs-space-3: var(--fs-rem-075);
  --fs-space-4: var(--fs-rem-100);
  --fs-space-5: var(--fs-rem-125);
  --fs-space-6: var(--fs-rem-150);
  --fs-space-7: var(--fs-rem-175);
  --fs-space-8: var(--fs-rem-200);
  --fs-space-10: var(--fs-rem-250);
  --fs-space-12: var(--fs-rem-300);
  --fs-space-16: var(--fs-rem-400);
  --fs-space-20: 5rem;

  /* Typography. Keep font, weight and leading scales global and reusable. */
  --fs-font-family: "DM Sans", "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;

  --fs-font-size-xs: var(--fs-rem-075);
  --fs-font-size-sm: 0.875rem;
  --fs-font-size-md: var(--fs-rem-100);
  --fs-font-size-lg: 1.125rem;
  --fs-font-size-xl: var(--fs-rem-125);
  --fs-font-size-2xl: var(--fs-rem-150);
  --fs-font-size-3xl: var(--fs-rem-200);
  --fs-font-size-4xl: var(--fs-rem-300);
  --fs-font-size-5xl: var(--fs-rem-400);

  --fs-line-height-xs: 100%;
  --fs-line-height-sm: 120%;
  --fs-line-height-md: 130%;
  --fs-line-height-lg: 140%;
  --fs-line-height-xl: 150%;
  --fs-line-height-display: 120%;

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

  --fs-letter-spacing-none: 0;
  --fs-letter-spacing-title: 0.125rem;

  --fs-text-body-size: var(--fs-font-size-md);

  --fs-text-small-size: var(--fs-font-size-xs);

  --fs-text-small-bold-size: var(--fs-font-size-xs);

  --fs-text-title-size: var(--fs-font-size-xs);
  --fs-text-title-letter-spacing: var(--fs-letter-spacing-title);

  --fs-text-big-size: var(--fs-font-size-xl);

  --fs-heading-1-size: var(--fs-font-size-5xl);
  --fs-heading-1-letter-spacing: var(--fs-letter-spacing-none);

  --fs-heading-2-size: var(--fs-font-size-4xl);
  --fs-heading-2-letter-spacing: var(--fs-letter-spacing-none);

  --fs-heading-5-size: var(--fs-font-size-2xl);
  --fs-heading-5-letter-spacing: var(--fs-letter-spacing-none);

  /* Layout widths from Figma. */
  --fs-width-desktop: 90rem;
  --fs-width-full: 100rem;
  --fs-width-12col: 87.5rem;
  --fs-width-8col: 58rem;
  --fs-width-6col: 43.25rem;
  --fs-width-3col: 21.125rem;
  --fs-container-page: var(--fs-width-desktop);
  --fs-grid-gap: var(--fs-space-6);
  --fs-logo-width: 9.375rem;
  --fs-logo-height: 2.6875rem;
  --fs-shop-banner-height: 18.75rem;
  --fs-shop-banner-mobile-height: 20rem;

  /* Radius from Figma. */
  --fs-radius-sm: 0.25rem;
  --fs-radius-md: 0.5rem;
  --fs-radius-xl: 0.75rem;
  --fs-radius-pill: 100px;

  /* Borders, shadows and motion. */
  --fs-border-width-sm: 1px;
  --fs-border-width-md: 2px;
  --fs-shadow-tag: 2px 2px 1px rgb(0 0 0 / 10%);
  /* --fs-shadow-card: 0 8px 24px rgb(8 34 13 / 8%); */
  --fs-duration-fast: 120ms;
  --fs-duration-base: 180ms;
  --fs-duration-slow: 280ms;
  --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Forms. */
  --fs-control-height-sm: 2.25rem;
  --fs-control-height-md: 3.5rem;
  --fs-control-height-lg: 5rem;
  --fs-control-padding-x: var(--fs-space-4);
  --fs-control-radius: var(--fs-radius-md);
  --fs-control-bg: var(--fs-color-white);
  --fs-control-border: var(--fs-color-secondary);
  --fs-control-border-focus: var(--fs-color-primary);
  --fs-control-text: var(--fs-color-text);
  --fs-control-placeholder: var(--fs-color-secondary-text);

  /* Buttons. */
  --fs-button-height-sm: 2.5rem;
  --fs-button-height-md: 3rem;
  --fs-button-padding-x: var(--fs-space-6);
  --fs-button-radius: var(--fs-radius-pill);
  --fs-button-primary-bg: var(--fs-color-primary);
  --fs-button-primary-bg-hover: var(--fs-color-primary-dark);
  --fs-button-primary-text: var(--fs-color-white);
  --fs-button-secondary-bg: var(--fs-color-white);
  --fs-button-secondary-border: var(--fs-color-primary);
  --fs-button-secondary-bg-hover: var(--fs-color-action-subtle);
  --fs-button-secondary-text: var(--fs-color-primary);
  --fs-button-promo-bg: var(--fs-color-yellow-400);
  --fs-button-promo-bg-hover: var(--fs-color-yellow-500);
  --fs-button-promo-text: var(--fs-color-text-strong);
  --fs-button-inverse-bg: transparent;
  --fs-button-inverse-border: var(--fs-color-white);
  --fs-button-inverse-bg-hover: rgb(255 255 255 / 14%);
  --fs-button-inverse-text: var(--fs-color-white);
  --fs-button-icon-size: var(--fs-space-8);

  /* Contact page. */
  --fs-contact-page-padding-block: var(--fs-space-16);
  --fs-contact-page-content-gap: var(--fs-space-12);
  --fs-contact-page-column-gap: var(--fs-space-16);
  --fs-contact-page-panel-padding: var(--fs-space-8);
  --fs-contact-page-panel-radius: var(--fs-radius-xl);
  --fs-contact-page-panel-bg: var(--fs-color-surface-muted);
  --fs-contact-page-detail-gap: var(--fs-space-6);

  /* FAQ page. */
  --fs-faq-container-width: 67.5rem;
  --fs-faq-padding-block: var(--fs-space-16);
  --fs-faq-heading-gap: var(--fs-space-7);
  --fs-faq-list-gap: var(--fs-space-5);
  --fs-faq-item-min-height: var(--fs-space-10);
  --fs-faq-item-padding-block: var(--fs-space-2);
  --fs-faq-item-padding-inline: var(--fs-space-0);
  --fs-faq-answer-padding-block: var(--fs-space-4) var(--fs-space-6);
  --fs-faq-answer-padding-inline: var(--fs-space-0);
  --fs-faq-icon-size: var(--fs-rem-100);

  /* Header. */
  --fs-header-bg: var(--fs-color-white);
  --fs-header-container-width: var(--fs-width-12col);
  --fs-header-logo-width: var(--fs-logo-width);
  --fs-header-logo-height: var(--fs-logo-height);
  --fs-header-main-gap: var(--fs-space-12);
  --fs-header-nav-gap: var(--fs-space-8);
  --fs-header-actions-gap: var(--fs-space-4);
  --fs-header-search-height: 2.25rem;
  --fs-header-search-button-size: 2.25rem;
  --fs-header-category-height: 2.5rem;
  --fs-header-category-bg: var(--fs-color-yellow-400);
  --fs-header-configurator-bg: var(--fs-color-yellow-300);
  --fs-header-account-bg: var(--fs-color-yellow-500);
  --fs-header-cart-bg: var(--fs-color-primary-dark);
  --fs-header-link-letter-spacing: 0.015rem;
  --fs-big-menu-bg: var(--fs-color-white);
  --fs-big-menu-muted-bg: var(--fs-color-background);
  --fs-big-menu-border: var(--fs-color-background-muted);
  --fs-big-menu-shadow: 0 1.25rem 3rem rgb(8 34 13 / 14%);

  /* Footer. */
  --fs-footer-bg: var(--fs-color-primary-dark);
  --fs-footer-container-width: var(--fs-width-12col);
  --fs-footer-padding-top: var(--fs-space-8);
  --fs-footer-padding-bottom: 5rem;
  --fs-footer-section-gap: var(--fs-space-6);
  --fs-footer-column-gap: var(--fs-space-3);
  --fs-footer-link-gap: var(--fs-space-2);
  --fs-footer-legal-gap: var(--fs-space-6);
  --fs-footer-divider-color: var(--fs-color-secondary);

  /* Flying cart. */
  --fs-flying-cart-width: 27.5rem;
  --fs-flying-cart-backdrop: rgb(15 23 17 / 0.45);
  --fs-flying-cart-bg: var(--fs-color-white);
  --fs-flying-cart-border: var(--fs-color-background);
  --fs-flying-cart-shadow: 0 1.5rem 4rem rgb(15 23 17 / 0.22);
  --fs-flying-cart-item-bg: var(--fs-color-surface-subtle);
  --fs-footer-heading-color: var(--fs-color-white);
  --fs-footer-link-color: var(--fs-color-white);
  --fs-footer-copy-color: var(--fs-color-secondary-text);

  /* Home hero. */
  --fs-home-hero-height: 32rem;
  --fs-home-hero-mobile-height: 34rem;
  --fs-home-hero-card-width: 31rem;
  --fs-home-hero-card-padding: var(--fs-space-8);
  --fs-home-hero-card-radius: var(--fs-radius-xl);
  --fs-home-hero-card-bg: var(--fs-color-white);
  --fs-home-hero-overlay: linear-gradient(90deg, rgb(8 34 13 / 30%) 0%, rgb(8 34 13 / 8%) 52%, rgb(8 34 13 / 0%) 100%);
  --fs-home-hero-controls-bg: rgb(255 255 255 / 92%);
  --fs-home-hero-dot-size: 0.625rem;
  --fs-home-hero-dot-active-width: 2rem;

  /* WooCommerce and product UI. */
  --fs-product-card-bg: var(--fs-color-background);
  --fs-product-card-border: var(--fs-color-background-muted);
  --fs-product-card-radius: var(--fs-rem-100);
  --fs-product-archive-columns: 4;
  --fs-product-archive-columns-tablet: 2;
  --fs-product-archive-sidebar-width: 16.25rem;
  --fs-product-archive-sidebar-gap: var(--fs-space-16);
  --fs-product-archive-sidebar-control-height: 2.5rem;
  --fs-product-archive-sidebar-mobile-width: min(21.25rem, 100vw);
  --fs-product-card-media-aspect-ratio: 3 / 2;
  --fs-related-product-slide-width: 82%;
  --fs-notice-padding-inline: clamp(var(--fs-space-3), 4vw, var(--fs-space-5));
  --fs-product-card-padding: var(--fs-space-3);
  --fs-product-card-title-height: 5rem;
  --fs-product-card-title-size: 0.875rem;
  --fs-product-card-title-line-height: 120%;
  --fs-product-card-details-gap: var(--fs-space-1);
  --fs-product-card-content-gap: var(--fs-space-3);
  --fs-product-gallery-bg: var(--fs-color-white);
  --fs-product-gallery-radius: var(--fs-radius-xl);
  --fs-product-price-color: var(--fs-color-primary);
  --fs-product-sale-price-color: var(--fs-color-danger);
  --fs-product-stock-color: var(--fs-color-lime-700);
  --fs-product-out-of-stock-color: var(--fs-color-danger);
  --fs-product-meta-color: var(--fs-color-secondary-text);
  --fs-product-option-bg: var(--fs-color-white);
  --fs-product-option-border: var(--fs-color-secondary);
  --fs-product-option-border-active: var(--fs-color-primary);
  --fs-product-tag-bg: var(--fs-color-white);
  --fs-product-tag-shadow: var(--fs-shadow-tag);
  --fs-product-badge-radius: var(--fs-radius-pill);
  --fs-product-badge-padding-inline: var(--fs-space-3);
  --fs-product-badge-padding-block: var(--fs-space-1);
  --fs-product-badge-promotion-bg: var(--fs-color-primary);
  --fs-product-badge-promotion-color: var(--fs-color-white);
  --fs-product-badge-new-bg: var(--fs-color-yellow-400);
  --fs-product-badge-new-color: var(--fs-color-text-strong);
  --fs-product-badge-bestseller-bg: var(--fs-color-white);
  --fs-product-badge-bestseller-color: var(--fs-color-primary);
  --fs-breadcrumb-color: var(--fs-color-text-strong);
  --fs-breadcrumb-current-color: var(--fs-color-text-muted);
  --fs-breadcrumb-gap: var(--fs-space-1);
  --fs-single-product-gap: var(--fs-space-12);
  --fs-single-product-gallery-gap: var(--fs-space-2);
  --fs-single-product-main-image-width: 35.5625rem;
  --fs-single-product-main-image-height: 31.25rem;
  --fs-single-product-main-image-ratio: 569 / 500;
  --fs-single-product-thumbnail-width: 6.9375rem;
  --fs-single-product-thumbnail-height: var(--fs-single-product-thumbnail-width);
  --fs-single-product-thumbnail-ratio: 1 / 1;
  --fs-single-product-gallery-width: calc(var(--fs-single-product-thumbnail-width) + var(--fs-single-product-gallery-gap) + var(--fs-single-product-main-image-width));
  --fs-single-product-summary-width: 35.5625rem;
  --fs-single-product-panel-bg: var(--fs-color-background);
  --fs-single-product-panel-radius: var(--fs-radius-md);
  --fs-single-product-panel-padding-x: var(--fs-space-4);
  --fs-single-product-panel-padding-y: var(--fs-space-6);

  /* My account. */
  --fs-account-container-width: var(--fs-width-12col);
  --fs-account-page-padding-block: var(--fs-space-12);
  --fs-account-page-padding-inline: var(--fs-space-4);
  --fs-account-shell-gap: var(--fs-space-6);
  --fs-account-nav-width: 18rem;
  --fs-account-panel-bg: var(--fs-color-surface);
  --fs-account-panel-border: var(--fs-color-border-muted);
  --fs-account-panel-radius: var(--fs-radius-xl);
  --fs-account-panel-padding: var(--fs-space-6);
  --fs-account-panel-shadow: var(--fs-shadow-card);
  --fs-account-nav-bg: var(--fs-color-surface-muted);
  --fs-account-nav-padding: var(--fs-space-2);
  --fs-account-nav-link-padding-block: var(--fs-space-3);
  --fs-account-nav-link-padding-inline: var(--fs-space-4);
  --fs-account-nav-link-radius: var(--fs-radius-md);
  --fs-account-content-gap: var(--fs-space-6);
  --fs-account-form-gap: var(--fs-space-4);
  --fs-account-field-gap: var(--fs-space-2);
  --fs-account-table-cell-padding-block: var(--fs-space-3);
  --fs-account-table-cell-padding-inline: var(--fs-space-4);
  --fs-account-notice-padding: var(--fs-space-4);
  --fs-account-auth-width: var(--fs-width-6col);
  --fs-account-auth-padding: var(--fs-space-10);
  --fs-account-auth-gap: var(--fs-space-6);
  --fs-account-auth-tab-padding: var(--fs-space-4);
  --fs-account-auth-button-height: 3.875rem;

  /* Z-index. */
  --fs-z-dropdown: 1000;
  --fs-z-sticky: 1020;
  --fs-z-modal: 1100;
  --fs-z-tooltip: 1200;

  /* Figma variable aliases. */
  --colors\/primary: var(--fs-color-primary);
  --colors\/primary-dark: var(--fs-color-primary-dark);
  --colors\/white: var(--fs-color-white);
  --colors\/text: var(--fs-color-text);
  --colors\/background: var(--fs-color-background);
  --colors\/background_: var(--fs-color-background-muted);
  --colors\/secondary: var(--fs-color-secondary);
  --colors\/secondary_: var(--fs-color-secondary-text);
  --colors\/yellow: var(--fs-color-yellow-500);
  --gray\/500: var(--fs-color-gray-500);
  --gray\/700: var(--fs-color-gray-700);
  --lime\/700: var(--fs-color-lime-700);
  --rem\/0\,25rem: var(--fs-rem-025);
  --rem\/0\,5rem: var(--fs-rem-050);
  --rem\/0\,75rem: var(--fs-rem-075);
  --rem\/1rem: var(--fs-rem-100);
  --rem\/1\,25rem: var(--fs-rem-125);
  --rem\/1\,5rem: var(--fs-rem-150);
  --rem\/1\,75rem: var(--fs-rem-175);
  --rem\/2rem: var(--fs-rem-200);
  --rem\/2\,5rem: var(--fs-rem-250);
  --rem\/3rem: var(--fs-rem-300);
  --rem\/4rem: var(--fs-rem-400);
  --border-radius\/sm: var(--fs-radius-sm);
  --border-radius\/md: var(--fs-radius-md);
  --border-radius\/xl: var(--fs-radius-xl);
  --width\/full-width: var(--fs-width-full);
  --width\/12col: var(--fs-width-12col);
  --width\/8col: var(--fs-width-8col);
  --width\/6col: var(--fs-width-6col);
  --width\/3col: var(--fs-width-3col);
}