/* ==========================================================================
   RINOVARA — Brand tokens
   Brand palette: Mint Leaf #00B67A · Dark Teal #114455
                  Bright Snow #F7F9F8 · Carbon Black #1A1A1A
   ========================================================================== */

:root {
  color-scheme: light; /* keep brand colours: no forced dark mode (Samsung Internet, Chrome) */

  /* Brand palette */
  --mint: #00b67a;
  --teal: #114455;
  --snow: #f7f9f8;
  --carbon: #1a1a1a;

  /* Color — light surfaces */
  --bg: var(--snow);
  --bg-alt: #edf2f0;
  --surface: #ffffff;
  --ink: var(--carbon);
  --ink-2: #545e61;
  --line: rgba(26, 26, 26, 0.12);

  /* Color — dark surfaces */
  --dark: var(--carbon);
  --dark-2: #232525;
  --on-dark: #eef3f1;
  --on-dark-2: #9aa7aa;
  --line-dark: rgba(238, 243, 241, 0.14);

  /* Color — accent */
  --accent: var(--mint);
  --accent-hover: #14c98b;
  --accent-text: #007a52;     /* mint text on light backgrounds (AA) */
  --accent-rgb: 0, 182, 122;
  --on-accent: var(--carbon); /* carbon on mint passes AA; white does not */
  --logo-core: var(--mint);   /* logo core: mint on light, currentColor (white) on dark */
  --error: #ffb3a7;           /* form errors on the teal contact section (AA on teal) */

  /* Type — Swiss: one neo-grotesk family + mono for metadata */
  --font-display: "Inter Tight", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mega: clamp(3.4rem, 0.6rem + 11.2vw, 12.5rem);
  --fs-h2: clamp(2.4rem, 1.1rem + 4.4vw, 5.75rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.8vw, 2rem);
  --fs-stat: clamp(3.5rem, 2rem + 5vw, 7rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  /* Layout */
  --max-width: 1440px;
  /* Gutters grow to clear the notch / Dynamic Island when a phone is held sideways */
  --page-gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --grid-gap: 16px;
  --header-h: 72px;

  /* Spacing scale — every margin, padding and gap on the site uses these.
     Fluid steps scale between phone (390px) and desktop (1440px+). */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: clamp(24px, 2.5vw, 36px);    /* label → title, title → body, small blocks */
  --space-xl: clamp(32px, 3.5vw, 56px);   /* section header → content, blocks within a section */
  --space-2xl: clamp(56px, 6vw, 96px);    /* section padding (top and bottom) */
  --section-y: var(--space-2xl);
  --tile-pad: clamp(22px, 2.2vw, 32px);
  --anchor-clear: 96px;                   /* nav links land content below the sticky pill */
  --radius: 999px;            /* buttons */
  --radius-tile: 22px;        /* bento tiles */
  --radius-media: 14px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;
}

@media (min-width: 700px) {
  :root { --page-gutter: max(32px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --grid-gap: 20px; }
}
@media (min-width: 1280px) {
  :root { --page-gutter: max(48px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}