/* ==========================================================
   Mokesčių SUFLERIS DS tokenai
   Šaltinis: Figma "MS Storybook" (ZkRyyI5TEHeg7IuUAz4HxW),
   sutikrinta su sufleris-ds-storybook/_variables.scss.

   Taisyklė: prototipų CSS hex spalvų ir px dydžių nerašo tiesiai,
   naudoja šiuos kintamuosius. Ko trūksta, pridedama čia su
   komentaru „papildyta, nėra Figmoje“.

   Lūžio taškai (CSS kintamųjų media query nepalaiko, todėl tik čia
   aprašyti, naudoti tas pačias reikšmes):
     ≤ 1100px  planšetė: siauresni tarpai, footeris 2 kolonom
     ≤ 860px   mobile: šoninis meniu tampa ištraukiamu
     ≤ 640px   mažas telefonas
   ========================================================== */
:root {
  /* ---------- Teal (primary) ---------- */
  --ds-teal-100: #f2f7f8;
  --ds-teal-200: #dbe9ea;
  --ds-teal-300: #94bcbf;
  --ds-teal-400: #70a6aa;
  --ds-teal-500: #4c9095;
  --ds-teal-600: #437f83;
  --ds-teal-700: #3a6d71;
  --ds-teal-800: #315c5f;
  --ds-teal-900: #284b4d;

  /* ---------- Salmon (akcentas) ---------- */
  --ds-salmon-100: #ffe8e8;
  --ds-salmon-200: #ffd1d1;
  --ds-salmon-300: #ffbaba;
  --ds-salmon-400: #ff9393;
  --ds-salmon-500: #ff6565;
  --ds-salmon-600: #d95656;
  --ds-salmon-700: #b24747;
  --ds-salmon-800: #8c3838;
  --ds-salmon-900: #662828;

  /* ---------- Purple (akcentas, PRO, DI) ---------- */
  --ds-purple-100: #f4e5f0;
  --ds-purple-200: #eacbe0;
  --ds-purple-300: #dfb2d1;
  --ds-purple-400: #cd87b8;
  --ds-purple-500: #b85399;
  --ds-purple-600: #9c4782;
  --ds-purple-700: #813a6b;
  --ds-purple-800: #652e54;
  --ds-purple-900: #4a213d;

  /* ---------- Grey (neutralios) ---------- */
  --ds-grey-100: #f2f5f5;
  --ds-grey-200: #e3e8e8;
  --ds-grey-300: #cdd5d6;
  --ds-grey-400: #abb9ba;
  --ds-grey-500: #899d9f;
  --ds-grey-600: #6c8284;
  --ds-grey-700: #556768;
  --ds-grey-800: #405359;
  --ds-grey-900: #272f30;

  /* ---------- Būsenos ---------- */
  --ds-red-100: #fadedc;
  --ds-red-200: #f4bcb8;
  --ds-red-300: #ee928c;
  --ds-red-400: #e55c52;
  --ds-red-500: #d92d20;
  --ds-red-600: #c8291e;
  --ds-red-700: #a02118;
  --ds-red-800: #781912;
  --ds-red-900: #50100c;

  --ds-green-100: #e3f2eb;
  --ds-green-200: #c7e5d7;
  --ds-green-300: #a4d5be;
  --ds-green-400: #79c19e;
  --ds-green-500: #4fab7f;
  --ds-green-600: #3f8865;
  --ds-green-700: #2f654b;
  --ds-green-800: #204634;
  --ds-green-900: #132a1f;

  --ds-blue-100: #e1e9f4;
  --ds-blue-200: #c3d2e9;
  --ds-blue-300: #9eb7dc;
  --ds-blue-400: #80a0d1;
  --ds-blue-500: #628ac6;
  --ds-blue-600: #406db0;
  --ds-blue-700: #315387;
  --ds-blue-800: #233c61;
  --ds-blue-900: #16253c;

  --ds-orange-100: #fcead9;
  --ds-orange-200: #fad6b3;
  --ds-orange-300: #f7bc83;
  --ds-orange-400: #f4a85d;
  --ds-orange-500: #f19132;
  --ds-orange-600: #e0770f;
  --ds-orange-700: #ac5b0c;
  --ds-orange-800: #7c4208;
  --ds-orange-900: #4c2905;

  /* ---------- Švelnūs fonai ---------- */
  --ds-sage: #e1ece2;
  --ds-sky: #e5f0fe;
  --ds-peach: #fcf1e2;
  --ds-blush: #f6e1e0;
  --ds-lilac: #f4e6ef;

  --ds-white: #ffffff; /* papildyta, nėra Figmoje */

  /* ---------- Semantiniai (komponentai naudoja šiuos) ---------- */
  --ds-bg-page: var(--ds-teal-200);
  --ds-bg-shell: var(--ds-white);
  --ds-bg-surface: var(--ds-grey-100);
  --ds-bg-surface-hover: var(--ds-grey-200);
  --ds-border: var(--ds-grey-200);
  --ds-border-strong: var(--ds-grey-300);
  --ds-text-title: var(--ds-grey-800);
  --ds-text-body: var(--ds-grey-800);
  --ds-text-muted: var(--ds-grey-600);
  --ds-text-faint: var(--ds-grey-400);
  --ds-accent: var(--ds-teal-700);
  --ds-accent-bg: var(--ds-teal-100);
  --ds-link: var(--ds-teal-700);
  --ds-link-hover: var(--ds-teal-900);
  --ds-focus-ring: 0 0 0 4px rgba(76, 144, 149, .15); /* teal-500, 15 % */

  /* ---------- Tarpai ---------- */
  --ds-space-xxs: 2px;
  --ds-space-xs: 4px;
  --ds-space-sm: 6px;
  --ds-space-md: 8px;
  --ds-space-lg: 12px;
  --ds-space-xl: 16px;
  --ds-space-2xl: 20px;
  --ds-space-3xl: 24px;
  --ds-space-4xl: 32px;
  --ds-space-5xl: 48px; /* papildyta, nėra Figmoje: puslapio blokų tarpai */
  --ds-space-6xl: 64px; /* papildyta, nėra Figmoje */

  /* ---------- Kampai ---------- */
  --ds-radius-none: 0;
  --ds-radius-xxs: 2px;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-3xl: 20px;
  --ds-radius-full: 9999px;

  /* ---------- Šešėliai (papildyta, nėra Figmoje) ---------- */
  --ds-shadow-sm: 0 1px 2px rgba(39, 47, 48, .06), 0 1px 3px rgba(39, 47, 48, .04);
  --ds-shadow-md: 0 4px 12px rgba(39, 47, 48, .08);
  --ds-shadow-lg: 0 12px 32px rgba(15, 40, 42, .14);

  /* ---------- Tipografija ---------- */
  --ds-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-font-family-serif: 'Enriqueta', serif;
  --ds-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* papildyta, nėra Figmoje */

  /* dydis / eilutės aukštis; svoriai nurodyti base.css klasėse */
  --ds-h1-size: 30px;  --ds-h1-lh: 38px;
  --ds-h2-size: 20px;  --ds-h2-lh: 30px;
  --ds-h3-size: 18px;  --ds-h3-lh: 30px;
  --ds-h4-size: 16px;  --ds-h4-lh: 26px;
  --ds-h5-size: 14px;  --ds-h5-lh: 21px;
  --ds-text-lg-size: 18px;    --ds-text-lg-lh: 28px;
  --ds-text-md-size: 16px;    --ds-text-md-lh: 24px;
  --ds-text-intro-size: 15px; --ds-text-intro-lh: 23px;
  --ds-text-btn-size: 15px;   --ds-text-btn-lh: 22px;
  --ds-text-sm-size: 13px;    --ds-text-sm-lh: 18px;
  --ds-text-xs-size: 12px;    --ds-text-xs-lh: 16px;
  --ds-caption-size: 11px;    --ds-caption-lh: 15px;

  /* ---------- Judesys (papildyta, nėra Figmoje) ---------- */
  --ds-ease: cubic-bezier(.22, .61, .36, 1);
  --ds-duration-fast: .15s;
  --ds-duration: .25s;
}