/* Levare design tokens — shared by the website and Storybook. Change values here, not in components. */
:root {
  /* Blue-gray scale (hue 214°: true blue-gray; the logo indigo is used only as the brand accent). Every neutral, background, border and overlay comes from here. */
  --blue-gray-50: #f5f7fa;
  --blue-gray-100: #e9eef4;
  --blue-gray-200: #d4dde8;
  --blue-gray-300: #b1c0d2;
  --blue-gray-400: #879bb5;
  --blue-gray-500: #617b9e;
  --blue-gray-600: #496283;
  --blue-gray-700: #364c68;
  --blue-gray-800: #24354c;
  --blue-gray-900: #152232;
  --blue-gray-900-rgb: 21, 34, 50;

  /* Brand accent: buttons, links, active states only */
  --brand: #0b5dc1;      /* primary blue */
  --brand-dark: #094a9a;
  --brand-light: #2ea3f2;
  --white: #ffffff;

  /* Text */
  --heading: var(--blue-gray-900);
  --ink: var(--blue-gray-700);
  --ink-on-alt: var(--blue-gray-700);
  --muted: var(--blue-gray-600);
  --nav-ink: var(--blue-gray-600);
  --footer-ink: var(--blue-gray-700);

  /* Lines */
  --line: var(--blue-gray-200);
  --input-line: var(--blue-gray-300);

  /* Backgrounds */
  --bg: var(--white);
  --bg-alt: var(--blue-gray-100);    /* alternate sections */
  --chip-bg: var(--blue-gray-50);    /* icon chips, image placeholders */
  --bg-footer: var(--blue-gray-200); /* footer */
  --bg-dark: var(--blue-gray-900);   /* behind images while they load */

  /* Status */
  --success: #15803d;
  --danger: #b91c1c;

  /* Image overlays: blue gradient multiplied into every banner photo */
  --image-gradient: linear-gradient(180deg, #5f86c6 0%, #a3b6d6 100%); /* lighter blue → blue-gray, multiplied into photos */
  --image-gradient-home: linear-gradient(180deg, rgba(10, 152, 170, .58) 0%, rgba(11, 93, 193, .73) 100%); /* home hero: exact levare.us setting */
  --image-blend: multiply;
  --scrim: rgba(var(--blue-gray-900-rgb), .72);        /* labels on photos */
  --overlay-modal: rgba(var(--blue-gray-900-rgb), .94); /* lightbox */
  --text-shadow: 0 2px 12px rgba(var(--blue-gray-900-rgb), .45);

  /* Typography */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-h3: 23px;         /* card titles */
  --text-title: clamp(1.6rem, 3vw, 36px); /* centered section titles */
  --text-h2: clamp(1.75rem, 3.4vw, 43px);
  --text-h1: clamp(2.1rem, 4.4vw, 56px);
  --leading: 1.7;
  --leading-tight: 1.2;
  --tracking-tight: -1px;
  --weight-body: 400;   /* body copy */
  --weight-link: 500;   /* text links */
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Layout spacing */
  --gutter: var(--space-5);                          /* page side padding */
  --section-y: clamp(40px, 4.5vw, 58px);             /* section top/bottom padding (original ≈ 58px) */
  --hero-h: clamp(260px, 27vw, 420px);              /* one banner height for every page (≈349px at 1280px wide) */
  --gap-xs: var(--space-2);                          /* icon ↔ text, chips */
  --gap-sm: var(--space-3);                          /* gallery tiles */
  --gap-md: var(--space-4);                          /* form fields, small grids */
  --gap-lg: var(--gutter-desktop);                   /* card grids */
  --gutter-desktop: 24px;                            /* column gutter on desktop */
  --gap-col: var(--gutter-desktop);                  /* two-column layouts */
  --card-pad: var(--space-7);
  --btn-y: 15px;                                     /* button padding (original 15px 30px) */
  --btn-x: 30px;
  --stack: 1em;                                      /* space after paragraphs */

  /* Shape & depth */
  --radius-sm: 8px;
  --radius-media: 10px;  /* one corner radius for every image, video, tile and drawing */
  --radius: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(var(--blue-gray-900-rgb), .05);
  --shadow-md: 0 12px 30px rgba(var(--blue-gray-900-rgb), .14);

  /* Sizes */
  --wrap: 1440px;        /* site max width */
  --wrap-pct: calc(100% - 2 * var(--space-16)); /* side margins on desktop */
  --narrow: 800px;
  --header-h: 80px;
  --icon: 1.15em;
}