/* Design tokens, taken from the Figma outline ("Real VS Sistemos"). Every colour, size and shadow used by the
   components comes from here; components never hard-code a brand value. */
:root {
  /* colour */
  --c-green: #7bc143;
  --c-green-tint: #eff8e8;              /* Inbank calculator box */
  --c-green-soft: rgb(123 193 67 / 16%); /* service icon tiles */
  --c-text: #1b1b1b;
  --c-text-muted: #737373;
  --c-page: #f9f6f5;
  --c-surface: #fff;
  --c-surface-muted: #f5f5f5;
  --c-artwork-bg: #000;          /* behind full-bleed artwork such as gift-coupon images (they are drawn on black) */
  --c-input: #f0f2f5;
  --c-border: #e5e5e5;
  --c-divider: rgb(0 0 0 / 10%);
  --c-star: #facc15;
  --c-star-small: #eab308;
  --c-required: #dc2626;
  --c-btn-dark: #4a4a4a;          /* KATEGORIJOS button: dark grey, not black (user 10-05) */
  --c-dim: rgb(27 27 27 / 22%);   /* page dimmed behind an open header popup or the search panel */

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-badge: "Plus Jakarta Sans", var(--font);
  --fs-display: clamp(1.75rem, 1rem + 2.25vw, 3rem);    /* 48px section titles at 1440 */
  --fs-h3: clamp(1.5rem, 1rem + 1.15vw, 2rem);          /* 32px panel titles */
  --fs-h4: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);        /* 24px card titles */
  --fs-lead: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem);  /* 24px intro text */
  --fs-xl: 1.25rem;  /* 20 */
  --fs-lg: 1rem;     /* 16 */
  --fs-md: 0.875rem; /* 14 */
  --fs-sm: 0.75rem;  /* 12 */
  --fs-xs: 0.625rem; /* 10 */
  --fs-tap-lg: 1.1875rem; /* 19: contacts popup on phones (user 10-05) */
  --fs-tap-md: 1.0625rem; /* 17: staff-card contacts on phones */

  /* space and shape */
  --gutter: clamp(16px, 4vw, 48px);
  --sq: clamp(0px, (100vw - 320px) / 10, 4px); /* 0 at 320px .. 4px from 360px: header controls squeeze on the narrowest phones */
  --content: 1344px;
  --gap: 24px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-pill: 9999px;

  /* elevation: the design's soft "raised" look (light from top-left), half the Figma spread (user 10-05: "2x
     tighter"; Figma 8/8/20 and 4/4/12), plus three plain drop shadows */
  --shadow-raised: -4px -4px 10px rgb(255 255 255 / 95%), 4px 4px 10px rgb(163 177 198 / 60%);
  --shadow-raised-sm: 2px 2px 6px rgb(163 177 198 / 50%);
  --shadow-inset: inset -4px -4px 8px #fff, inset 4px 4px 8px rgb(163 177 198 / 40%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  --shadow-hover: 0 10px 20px rgb(115 115 115 / 25%);

  --ease: 160ms ease;
}