/* Smile Craft Dental design tokens.
   Every colour, font and spacing value lives here; change it here only.
   Fonts: https://fonts.google.com/share?selection.family=Onest:wght@400;600|Young+Serif */

:root {
  /* Colours: "neel and genda", indigo dye and marigold */
  --porcelain: #f6f6f2; /* page background, a cool tooth-white */
  --enamel: #ffffff; /* cards, forms, shade tabs */
  --ink: #1d2a5e; /* neel (indigo): text, dark booking band, photo overlays (12.5:1 on porcelain) */
  --ink-soft: #5a6385; /* supporting text (5.4:1 on porcelain) */
  --genda: #f0a830; /* marigold accent: Book buttons and focus on dark. Use ink text on it (6.7:1), never white */
  --genda-deep: #b8760a; /* Book button edge: 3:1 or more against porcelain, white, mist and ink, so the button reads on any section */
  --gingiva: #e58e8a; /* gum pink: the selected shade tab only */
  --line: #d9dce6; /* dividers */
  --mist: #e9ecf4; /* indigo wash: tinted card surface */
  --open: #2f7d5b; /* open-now status dot */
  --error: #b3261e; /* form errors (6:1 on porcelain) */

  /* Shade guide tints (hero only), lightest to darkest */
  --shade-1: #f1ebdd;
  --shade-2: #ece3d0;
  --shade-3: #e7dbc4;
  --shade-4: #e2d3b8;
  --shade-5: #ddcbad;
  --shade-6: #d9c4a3;
  --shade-7: #d4bc98;
  --shade-8: #cfb48d;

  /* Type */
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Onest", system-ui, sans-serif;
  /* Scale: major third (1.25) from a 17px base */
  /* Fluid: phone size → desktop size (unchanged on desktop) */
  --fs-0: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16 → 17px body */
  --fs-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.328rem); /* 18 → 21px */
  --fs-2: clamp(1.375rem, 1.2rem + 0.6vw, 1.66rem); /* 22 → 27px */
  --fs-3: clamp(1.625rem, 1.35rem + 1vw, 2.075rem); /* 26 → 33px */
  --fs-4: clamp(1.875rem, 1.4rem + 1.7vw, 2.594rem); /* 30 → 42px */
  --fs-5: clamp(2.125rem, 1.5rem + 2.4vw, 3.242rem); /* 34 → 52px */
  --fs-6: clamp(2.25rem, 1.4rem + 4.2vw, 5.5rem); /* hero: 36 → 88px */
  --lh-body: 1.55;
  --measure: 65ch;

  /* Spacing: 8px steps */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --gap-section: clamp(
    5rem,
    11vw,
    10rem
  ); /* one gap between every page section */

  /* Shapes */
  --radius-ui: 10px;
  --radius-card: 28px; /* cards and photo frames */
  --radius-sm: 16px; /* small cards and list items inside sections */
  --radius-tab: 40% 40% 12px 12px; /* tooth-shaped shade tabs */
}