/* ==========================================================================
   VARIABLES.CSS – Design Tokens за „Стъпалото"
   Цветове, типография, spacing, shadows от брандбука и дизайн системата
   ========================================================================== */

:root {
  /* ─── Brand Colors (от брандбука) ─── */
  --color-primary: #58AD77;
  --color-primary-dark: #096d3d;
  --color-primary-light: #90CFAA;
  --color-primary-container: #58ad77;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #003d1f;

  /* ─── Secondary ─── */
  --color-secondary: #2c694b;
  --color-secondary-container: #b0f1ca;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #337051;

  /* ─── Accent Colors (от брандбука) ─── */
  --color-lavender: #B7B6DB;
  --color-pink: #EAAFCF;
  --color-blue: #A4D3E0;
  --color-powder: #DDB3AF;
  --color-ochre: #F4CC92;
  --color-coral: #F7A391;

  /* Text-safe deep companions (WCAG на светъл фон) */
  --color-blue-deep: #2A6577;
  --color-pink-deep: #A34A79;
  --color-lavender-deep: #52518F;
  --color-ochre-deep: #E0A952;
  --color-coral-deep: #C05B44;

  /* Tint backgrounds (много светли фонове от акцентите) */
  --tint-green: #EAF5EE;
  --tint-blue: #EDF6F9;
  --tint-lavender: #F1F1F8;
  --tint-pink: #FBF1F6;
  --tint-ochre: #FDF6EA;
  --tint-coral: #FEF1ED;

  /* Семантични акценти по категория услуги */
  --accent-therapy: var(--color-primary);
  --accent-therapy-deep: var(--color-primary-dark);
  --accent-therapy-tint: var(--tint-green);
  --accent-corrective: var(--color-blue);
  --accent-corrective-deep: var(--color-blue-deep);
  --accent-corrective-tint: var(--tint-blue);
  --accent-pedicure: var(--color-lavender);
  --accent-pedicure-deep: var(--color-lavender-deep);
  --accent-pedicure-tint: var(--tint-lavender);
  --accent-manicure: var(--color-pink);
  --accent-manicure-deep: var(--color-pink-deep);
  --accent-manicure-tint: var(--tint-pink);

  /* ─── Tertiary ─── */
  --color-tertiary: #5b5b7c;
  --color-tertiary-container: #9a99bd;
  --color-tertiary-fixed: #e1dfff;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #31314f;
  --color-on-tertiary-fixed-variant: #444463;

  /* ─── Surfaces ─── */
  --color-background: #f8faf8;
  --color-surface: #f8faf8;
  --color-surface-dim: #d8dad9;
  --color-surface-bright: #f8faf8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f2;
  --color-surface-container: #eceeec;
  --color-surface-container-high: #e6e9e7;
  --color-surface-container-highest: #e1e3e1;
  --color-surface-variant: #e1e3e1;
  --color-surface-tint: #096d3d;

  /* ─── On-Surface ─── */
  --color-on-surface: #191c1b;
  --color-on-surface-variant: #3f4941;
  --color-on-background: #191c1b;

  /* ─── Outline ─── */
  --color-outline: #6f7a70;
  --color-outline-variant: #bec9be;

  /* ─── Inverse ─── */
  --color-inverse-surface: #2e3130;
  --color-inverse-on-surface: #eff1ef;
  --color-inverse-primary: #82d99f;

  /* ─── Error ─── */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  /* ─── Fixed ─── */
  --color-primary-fixed: #9ef5b9;
  --color-primary-fixed-dim: #82d99f;
  --color-secondary-fixed: #b0f1ca;
  --color-secondary-fixed-dim: #95d4af;

  /* ─── Typography ───
     Основен шрифт по брандбука: Muller Next (Light за заглавия,
     Regular за текст). @font-face е дефиниран в base.css и се зарежда
     щом .woff2 файловете са в assets/fonts/. Montserrat е плавният
     резервен вариант (най-близкия свободен аналог с кирилица), докато
     лицензираните файлове бъдат добавени. --font-family = body шрифт. */
  --font-display: 'Muller Next', 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Muller Next', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-body);

  /* Display (fluid) */
  --font-display-lg-size: clamp(2.125rem, 1.35rem + 3.1vw, 3.25rem);
  --font-display-lg-weight: 300;
  --font-display-lg-line-height: 1.12;
  --font-display-lg-letter-spacing: 0.01em;

  /* Headline (fluid) */
  --font-headline-lg-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --font-headline-lg-weight: 400;
  --font-headline-lg-line-height: 1.2;

  /* Title (fluid) */
  --font-title-md-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --font-title-md-weight: 500;
  --font-title-md-line-height: 1.4;

  /* Body */
  --font-body-lg-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --font-body-lg-weight: 400;
  --font-body-lg-line-height: 1.6;

  --font-body-md-size: 16px;
  --font-body-md-weight: 400;
  --font-body-md-line-height: 24px;

  /* Label */
  --font-label-sm-size: 14px;
  --font-label-sm-weight: 600;
  --font-label-sm-line-height: 20px;
  --font-label-sm-letter-spacing: 0.02em;

  /* ─── Spacing (8px base scale) ─── */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-base: 8px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
  --space-gutter: 24px;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-padding: 20px;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  /* Органична „blob" форма – споделеният подпис на бранда (лого чип, икони,
     акцентни badge-ове). Дефиниран веднъж вместо повтарян 12× из кода. */
  --radius-blob: 42% 58% 55% 45% / 52% 45% 55% 48%;

  /* ─── Shadows (layered, green-tinted, for depth & contrast) ───
     Двуслойни сенки: близък контактен слой + мек ambient слой – дават
     повече дълбочина и контраст, без да стават тежки/„флашащи". */
  --shadow-sm:
    0 1px 2px rgba(9, 109, 61, 0.05),
    0 4px 16px rgba(9, 109, 61, 0.05);
  --shadow-md:
    0 2px 6px rgba(9, 109, 61, 0.06),
    0 10px 30px rgba(9, 109, 61, 0.09);
  --shadow-lg:
    0 6px 14px rgba(9, 109, 61, 0.08),
    0 20px 48px rgba(9, 109, 61, 0.12);
  --shadow-xl:
    0 10px 24px rgba(9, 109, 61, 0.10),
    0 36px 70px -12px rgba(9, 109, 61, 0.16);

  /* Повдигнато hover състояние + мек цветен „glow" за контраст */
  --shadow-hover:
    0 10px 20px rgba(9, 109, 61, 0.12),
    0 28px 56px -10px rgba(9, 109, 61, 0.20);
  --shadow-primary-glow: 0 10px 28px -6px rgba(9, 109, 61, 0.45);

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Fluid „liquid" easing – споделен подпис за органичните ефекти
     (button fill, underline, focus fill, shadow bloom). Плавно забавяне. */
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fluid: 500ms var(--ease-fluid);

  /* ─── Z-Index ─── */
  --z-header: 50;
  --z-mobile-menu: 100;
  --z-lightbox: 200;
}