/* ==========================================================================
   Mylamarin design tokens
   Direction "C · Soft Mint". Every colour on the site comes from here.
   Dark mode = same token names, different values (html[data-theme="dark"]).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour: light */
  --bg: #F7FCFA;
  --bg-grad: linear-gradient(180deg, #E3F7EE 0%, #F7FCFA 640px);
  --surface: #FFFFFF;
  --surface-2: #F2FAF6;
  --surface-3: #E6F5EE;
  --border: #CBEBDD;
  --border-soft: #DCEFE7;
  --text: #103630;
  --text-muted: #4E6E66;
  --text-faint: #567770;
  --primary: #1A7F66;
  --primary-hover: #156B56;
  --on-primary: #FFFFFF;
  --accent-text: #166E58;
  --brand-deep: #1C6B57;
  --brand-deeper: #134F41;
  --on-brand: #EAF8F2;
  --on-brand-muted: #BFE3D6;
  --gold: #E3B55A;
  --gold-soft: #F7EBCF;
  --on-gold: #2A2110;
  --whatsapp: #25D366;
  --danger: #B42318;
  --danger-soft: #FEECEB;
  --warn-soft: #FFF6E0;
  --warn-text: #7A5300;
  --footer-bg: #0E2622;
  --footer-text: #CFEDE2;
  --footer-muted: #8FB3A8;
  --ph-stroke: #9CC9B8;
  --ph-fill: rgba(28, 138, 110, .06);

  --shadow-sm: 0 2px 8px rgba(16, 54, 48, .06);
  --shadow-md: 0 10px 30px rgba(16, 54, 48, .10);
  --shadow-lg: 0 18px 50px rgba(16, 54, 48, .14);

  /* Typography */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 2.4vw, 2.75rem);
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* Spacing & shape */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1180px;
  --gutter: 16px;
  --header-h: 68px;
}

/* Colour: dark, used when the visitor picked dark, or their OS is dark and they picked nothing */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0A1C19;
  --bg-grad: linear-gradient(180deg, #0E2622 0%, #0A1C19 640px);
  --surface: #112924;
  --surface-2: #0C211D;
  --surface-3: #16332D;
  --border: #24483F;
  --border-soft: #1C3B34;
  --text: #E6F4EE;
  --text-muted: #A9C7BE;
  --text-faint: #86A99F;
  --primary: #4FD1A5;
  --primary-hover: #6FDDB7;
  --on-primary: #0A1C19;
  --accent-text: #6FDDB7;
  --brand-deep: #12302A;
  --brand-deeper: #0C221E;
  --on-brand: #E6F4EE;
  --on-brand-muted: #A9C7BE;
  --gold: #E3B55A;
  --gold-soft: #3A3018;
  --on-gold: #1E1708;
  --danger: #FF8A80;
  --danger-soft: #3A1714;
  --warn-soft: #3A3018;
  --warn-text: #F0CF8C;
  --footer-bg: #07130F;
  --footer-text: #CFEDE2;
  --footer-muted: #86A99F;
  --ph-stroke: #3E6B60;
  --ph-fill: rgba(79, 209, 165, .05);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);
}