/* Claro Dental Care — the official brand, laid over the design system.
 *
 * The site was built on the "Organic" palette (terracotta #c67139, sage
 * #7a8a5e, cream #f5ead8) and Playfair Display. That is the palette the clinic
 * system was re-skinned AWAY from — so the website and the software the same
 * clinic runs looked like two different businesses.
 *
 * Every value below is copied from the running system's styles.css, not
 * matched by eye, so the two are identical rather than close.
 *
 * Loaded AFTER the design system's stylesheet, so it only has to restate the
 * tokens that change. Editing the generated _ds file instead would work until
 * the day it is regenerated.
 *
 * Brand rules this enforces (Claro_Brand_Guidelines.pdf, Edition 01):
 *   · Fraunces for display, Jost for text and every numeral
 *   · four colours and one error red — no fifth
 *   · the mark is never redrawn; brand/ holds the master artwork
 */

/* Self-hosted rather than Google Fonts: these are the exact files the brand
   ships, the page keeps working when a CDN is slow or blocked, and one fewer
   third party sees who visits a dental clinic. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- type ------------------------------------------------------------ */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  /* The guidelines set display around 350–420, not 500: Fraunces at 500 is
     heavier than Playfair at the same number and headings turn stodgy. */
  --font-heading-weight: 400;

  /* ---- the four colours ------------------------------------------------ */
  --color-bg: #F4EEE3;        /* Cream  */
  --color-surface: #E4D6BE;   /* Sand   */
  --color-text: #3E2E22;      /* Walnut */
  --color-accent: #1C5744;    /* Emerald — the primary, and the logo's colour */

  /* The Organic palette had a second accent (sage) used for confirmations and
     quote marks. The brand has no fifth colour, so it resolves to Walnut —
     still a distinct voice from Emerald, still inside the palette. */
  --color-accent-2: #3E2E22;

  /* ---- the three tints, one from each of the brand's tint scales -------- */
  /* Chosen by the owner from the guidelines' tint rows:
   *   Emerald  1C5744 · 4E7C6C · 81A194 · B3C6BE · DCE7E3  ←
   *   Walnut   3E2E22 · 6B5B4C · 988877 · C4B8A9 · E8E0D5  ←
   *   Sand     8A7A66 · A99B84 · C4B69D · D9CCB4  ←        · E4D6BE
   *
   * The guidelines scope that row to "data & infographics only". Used here as
   * quiet surfaces instead — panels, medallions, dividers — while type,
   * buttons and the mark stay on the core four, so the brand still reads as
   * Emerald on Cream rather than as a wash of tints.
   */
  --tint-emerald: #DCE7E3;
  --tint-walnut: #E8E0D5;
  --tint-sand: #D9CCB4;

  /* One step deeper on the Walnut row. --tint-walnut sits so close to the team
     section's own #FCF9F2 that a shape painted in it read as a printing flaw
     rather than a decision; this one carries at a 12px sliver. */
  --tint-walnut-deep: #C4B8A9;

  /* The three shapes behind the doctors' portraits, softened at the owner's
     request. Each is its source above at 70% over the section's background
     (#FCF9F2) — a ratio rather than three picked colours, so they stay a set
     and can be retuned together by moving one number.
     They are separate tokens because the sources are not free to change:
     --tint-emerald is also --color-accent-100 and --tint-sand is also
     --color-neutral-300, so editing either in place would repaint panels and
     rules elsewhere on the page. */
  --tint-emerald-soft: #E6ECE8;  /* #DCE7E3 at 70% */
  --tint-walnut-soft:  #D5CCBF;  /* #C4B8A9 at 70% */
  --tint-sand-soft:    #E4DAC7;  /* #D9CCB4 at 70% */

  /* ---- the filled buttons --------------------------------------------- */
  /* The owner's choice, from a swatch: the solid buttons are Walnut, not
     Emerald. This is deliberately NOT a change to --color-accent — that token
     also draws the mark, the links, the DENTIST labels and every accent span
     in the headings, all of which stay Emerald. Only the filled action
     changes, so the page keeps its green and loses only the green *button*.
     Worth knowing: the guidelines call Emerald the primary and ask for one
     Emerald action per screen. After this there is none, by decision.
     #6B5B4C is the Walnut row's second step. Hover and active are the same
     colour walked darker, since the row's next step down (#3E2E22) is too
     large a jump to read as a press. Porcelain on the base measures 5.7:1.

     The label turns warm Sand on hover and on press — also the owner's, also
     from a swatch. That is what sets the two darker steps: #C4B69D on the
     first draft of hover (#5D4F42) measured 3.95:1, under the 4.5 a 14px
     label needs, so both states moved one step deeper until it cleared.
     Sand now reads 4.8:1 on hover and 5.7:1 on press, and the button
     visibly darkens as you reach it, which is what a hover is for. */
  --action: #6B5B4C;
  --action-hover: #4F4338;
  --action-active: #413830;
  --action-text: #F4EEE3;      /* Porcelain, at rest — 5.6:1 on #6B5B4C */
  --action-text-hot: #C4B69D;  /* warm Sand, hovered and pressed */

  /* Sand as type, for the accented words on the dark closing section — the
     owner's choice. It is the brand's fourth colour and the guidelines treat
     it as a surface, so this is the one place it is set in type, and only
     against #2B2018, where it reads 11.1:1. Never put it on Cream: that
     pairing is 1.4:1 and the guidelines forbid it by name. */
  --on-dark-accent: #E4D6BE;

  /* ---- neutrals -------------------------------------------------------- */
  --color-neutral-100: #FCF9F2;  /* card  */
  --color-neutral-200: var(--tint-walnut);
  --color-neutral-300: var(--tint-sand);  /* dividers and rules */
  --color-neutral-400: #CFBD9D;  /* sand-400 */
  --color-neutral-500: #B5A181;  /* sand-500 */
  --color-neutral-600: #8A8071;  /* slate */
  --color-neutral-700: #6B5748;  /* walnut-500 — body copy on cream */
  --color-neutral-800: #3E2E22;
  --color-neutral-900: #2B2018;

  /* ---- Emerald ramp ---------------------------------------------------- */
  /* 100 is the site's most-used soft surface — the feature medallions and the
     pale panels — so it takes the chosen Emerald tint rather than the
     system's own 100, which is a touch greyer. */
  --color-accent-100: var(--tint-emerald);
  --color-accent-200: #C6D9D1;
  --color-accent-300: #93B8AA;
  --color-accent-400: #5C9280;
  --color-accent-500: #34715A;
  --color-accent-600: #23624C;
  --color-accent-700: #1C5744;
  --color-accent-800: #143D30;
  --color-accent-900: #0D2A21;

  /* ---- Walnut ramp, standing in for the old sage ----------------------- */
  --color-accent-2-100: #EDE8E2;
  --color-accent-2-200: var(--tint-walnut);
  --color-accent-2-300: #B9AEA2;
  --color-accent-2-400: #937F6D;
  --color-accent-2-500: #7A6558;
  --color-accent-2-600: #6B5748;
  --color-accent-2-700: #3E2E22;
  --color-accent-2-800: #2B2018;
  --color-accent-2-900: #1C150F;
}

/* Fraunces is set in sentence case and never tracked — the guidelines say so
   twice. The page had headings carrying letter-spacing from the old face,
   which on a serif this soft reads as a mistake rather than a choice.
   The oversized watermarks are excluded: their spacing is the whole device. */
.cl-h1, .cl-h2, .cl-quote, h1, h2, h3 {
  letter-spacing: normal;
}

/* Numerals are Jost everywhere, including inside display type — a price or a
   time is read, not admired. */
.cl-num, time, [data-num] {
  font-family: 'Jost', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* The lockup replaces a wordmark that was set as live text in the heading
   font. Sized by height so it never depends on the font that happens to load. */
.claro-lockup {
  display: block;
  height: 46px;
  width: auto;
}
@media (max-width: 700px) {
  .claro-lockup { height: 38px; }
}

/* The filled action, in Walnut. brand.css loads after the design system, so
   restating these rules is enough — the generated _ds file stays as it was
   generated.

   :active covers the finger as well as the mouse; a tap fires it on touch.
   And because hover and press now look the same, the sticky :hover that some
   mobile browsers leave behind after a tap costs nothing here. */
.btn-primary { background: var(--action); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover); color: var(--action-text-hot); }
.btn-primary:active { background: var(--action-active); color: var(--action-text-hot); }

/* Only the filled buttons. .btn-secondary sits on Cream with no fill, and Sand
   on Cream is 1.3:1 — the guidelines forbid that pairing outright, and its
   label would simply vanish under the cursor. */

/* iOS zooms into any field whose text is under 16px and does not zoom back out
   afterwards, so opening the chat or the booking form on a phone left the whole
   page magnified. The design system sets .input to 14px; this is the same fix
   the clinic system already carries.

   Not maximum-scale=1 in the viewport tag: that stops the zoom by taking
   pinch-zoom away from everyone, which a clinic's website should not do.

   pointer:coarse catches phones whatever their width; the width query catches
   the ones that lie about it. */
@media (pointer: coarse), (max-width: 720px) {
  /* !important because the fields carry font-size in a style attribute, and an
     inline style beats any rule that is merely more specific. The page's own
     responsive block does the same thing for the same reason. */
  input, select, textarea, .input { font-size: 16px !important; }
}