/* Dermatology Group of Florida — design tokens
 *
 * The product's own skin (DECISIONS G2, G9, G10): white surfaces with faint tinted panels, Lora for
 * headings at regular weight, Manrope for everything else, small radii, generous whitespace, one
 * brand colour used for the call to action and nothing else. The brand colour is the "Pura Vida
 * Miami" blue (Steve, 2026-10-23), measured from that site's own stylesheets as its one saturated
 * accent, #00b2ff. Role names follow the fleet's token contract (--c-*, --f-*, --fs-*, --sp-*,
 * --r-*, --sh-*) so a practice can later override them from its own brand.json without renaming.
 *
 * Rule: components use ROLES, never raw colours. If a colour is needed that no role covers, add a
 * role here with a one-line comment saying what it is for, and record it in design/DESIGN-SYSTEM.md.
 * Contrast figures in comments were measured 2026-10-23.
 */
:root {
  /* ---- colour: brand and ink ---- */
  --c-brand: #00b2ff;          /* the blue; the one brand colour */
  --c-brand-ink: #22262b;      /* text placed ON the brand blue (6.4:1); white would fail at 2.4:1 */
  --c-accent: #146c9e;         /* a deeper blue for eyebrows, rules, icon strokes: 5.7:1 on white, 5.2:1 on the pale band */
  --c-cta: #00b2ff;            /* the ONE call-to-action fill */
  --c-cta-ink: #22262b;        /* text on the CTA (6.4:1) */
  --c-link: #146c9e;           /* inline links on white (5.7:1) */
  --c-ink: #22262b;            /* body text: a neutral charcoal (the plum ink belonged to the pink) */
  --c-ink-muted: #5b6168;      /* meta, captions, helper copy (6.3:1 on white, 5.6:1 on the pale band) */
  --c-ink-inverse: #ffffff;    /* text on deep grounds */
  --c-surface: #ffffff;        /* page */
  --c-surface-alt: #e8f5fc;    /* tinted band / panel */
  --c-surface-brand: #d6eef9;  /* stronger blue panel */
  --c-surface-accent: #f2f9fd; /* faintest tint: hover, zebra, card wells */
  --c-ground-deep: #15181d;    /* footer, dark feature bands */
  --c-ground-photo: #d9e8f0;   /* behind imagery before it loads */
  --c-line: #d3e3ec;           /* hairlines, borders, input outlines */
  --c-focus: #146c9e;          /* keyboard focus ring */
  --c-scrim: rgb(21 24 29 / 0.38);
  --c-error: #a11d1d;

  /* ---- colour: scheduler roles (added for this product) ---- */
  --c-open: #e6f4f0;           /* a day or slot with openings: fill */
  --c-open-ink: #0f5d4d;       /* text on --c-open (6.9:1) */
  --c-open-strong: #167a65;    /* the soonest / today emphasis: fill */
  --c-open-strong-ink: #ffffff;/* 5.2:1 */
  --c-open-soft: #f0f8f5;      /* a day the scheduler may have times for that this page has not seen: green but softer, with a dashed edge (G19) */
  --c-closed: #f1f3f5;         /* a day with no openings: fill */
  --c-closed-ink: #6b7280;     /* text on --c-closed (4.6:1) */
  --c-phone: #fef3e2;          /* "call to book": fill */
  --c-phone-ink: #8a4b06;      /* text on --c-phone */
  --c-pin: #22262b;            /* map pin, default */
  --c-pin-hot: #167a65;        /* map pin, opening today */
  --c-pin-muted: #a7b0b8;      /* map pin, phone-only or shared */
  --c-pin-me: #00b2ff;         /* the patient's location: the brand blue as a dot, the map convention */
  --c-star: #f4b400;           /* review stars: the familiar Google yellow; filled to the practice's rating */

  /* ---- colour: the map's own surface (G17): OpenFreeMap's Positron recoloured through these roles, see /design/map-tint.js ---- */
  --c-map-land: #f7f9fa;       /* basemap land: a hair cooler than the page, so the map reads as a surface, not a hole */
  --c-map-built: #eef2f5;      /* residential areas and buildings */
  --c-map-water: #cfe6f3;      /* water: a pale tint of the blue family, never the brand blue itself (that is the CTA) */
  --c-map-water-line: #b9d8ea; /* rivers and canals */
  --c-map-park: #e2efe4;       /* parks and woods: a quiet green, kept apart from the availability green */
  --c-map-road: #ffffff;       /* road fill */
  --c-map-road-casing: #dde5ea;/* road edges, minor roads, paths */
  --c-map-boundary: #c3ced6;   /* county and state lines */
  --c-star-empty: #dfe6ec;     /* the unfilled part of a star */

  /* ---- type ---- */
  --f-display: "Lora", Georgia, "Times New Roman", serif;
  --f-body: "Manrope", system-ui, sans-serif;
  --f-ui: var(--f-body);
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-xl: 1.1875rem;
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  --fs-display: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-display-xl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --fw-display: 400;
  --fw-body: 400;
  --fw-strong: 600;
  --fw-ui: 500;
  --ls-caps: 0.12em;
  --ls-display: -0.005em;

  /* ---- space and measure ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --w-wrap: 74rem;
  --w-wide: 100rem;            /* the list-and-map page: at 88rem the week squares could not grow past 62px on a 1536 screen (G14) */
  --w-prose: 66ch;
  --w-narrow: 38rem;
  --sec-y: clamp(2.5rem, 5vw, 4.5rem);
  --sec-y-lg: clamp(3rem, 7vw, 6rem);

  /* ---- shape and elevation ---- */
  --r-sm: 2px;                 /* inputs, tags */
  --r-md: 4px;                 /* buttons, cards */
  --r-lg: 8px;                 /* imagery, panels, modals */
  --r-pill: 999px;
  --r-chip: 6px;               /* availability chips and day cells */
  --sh-sm: 0 1px 2px rgb(21 24 29 / 0.08);
  --sh-lg: 0 12px 32px -16px rgb(21 24 29 / 0.28);
  --dur-fast: 160ms;

  /* ---- layout roles for the scheduler ---- */
  --w-map: clamp(400px, 38vw, 620px); /* the map column from 1366px: a larger share of the screen (G16), 584px at 1536 */
  --w-map-narrow: 360px;       /* the map column between 1024 and 1365px, where the day grid sits under the provider */
  --h-map-stacked: 280px;      /* the map band when it stacks above the list */
  --control-h: 46px;           /* inputs, selects, chips in the search strip */
  --cell-h: 78px;              /* a day square in the ten-day grid: a day label and up to three times */
  --w-more: 52px;              /* the "More" square that spans both rows of the grid */
}