/* ==========================================================================
   tokens.css — the single source of truth for colour, type and spacing.
   Nothing below this file should contain a raw hex value or a magic pixel
   number; every other stylesheet reads from these custom properties.
   ========================================================================== */

:root {

  /* ---- Neutrals -----------------------------------------------------------
     A warm, sand-biased neutral ramp. `--ground` is the page, `--tint` the
     alternating section, `--surface` the cards that sit on top of both.      */

  --ground:        #faf8f3;
  --tint:          #f5f1eb;   /* the live site's own alternating-section cream */
  --tint-2:        #ebe5db;
  --surface:       #ffffff;
  --rule:          #ded6c6;
  --rule-soft:     #e9e3d6;

  --ink:           #1c1917;
  --ink-2:         #3d3733;

  /* Darkened from the original #78716c, which measured 4.04:1 on --tint and
     failed AA. This sits at ~5.9:1 on --ground and ~5.4:1 on --tint.         */
  --muted:         #5f5952;

  /* ---- Brand --------------------------------------------------------------
     Sampled from redcoconut.com.ph, September 2026. The live site runs one red
     across headings, buttons and active states (#b21f2d), a deeper red on the
     Book Now control (#a6192e), a near-black band (#121315) and the cream
     above.

     The supplied brand lockup (assets/Logo2.png) inks its script in exactly
     #a6192e — the same red as --red-text below — so the logo and the UI agree
     without either having been bent to match the other.

     Split into fill / text / hover tones for the same reason the golds were:
     one red cannot serve both a 12px uppercase label and a white-on-colour
     button and clear 4.5:1 in both places.                                   */

  --red:           #b21f2d;   /* fills and accent text — 6.7:1 on --ground    */
  --red-text:      #a6192e;   /* labels and eyebrows on light grounds, 7.1:1  */
  --red-deep:      #8e1522;   /* hover and pressed — 9.2:1 under white        */
  /* The exact brand red on the dark grounds, by the client's decision
     (September 2026). It replaced the pale pink #f2a7ad.

     Known accessibility gap: measured in the page, #b21f2d is 2.7:1 on
     --char-deep, 2.8:1 on --char-ink, 2.6:1 in a review card and 2.4:1 in the
     placeholder notice. That is under the 4.5:1 WCAG AA asks of the 12px
     labels, and under the 3:1 it asks of the 40px figures.
     #ff4d57 is the same hue lifted just far enough to pass everywhere
     (4.9:1 at worst) if that trade-off is revisited. */
  --red-on-dark:   var(--red);
  --on-red:        #ffe1e4;   /* labels on a --red panel, 5.5:1               */

  /* Near-blacks, warmed a shade off the site's #121315 so they sit with the
     sand neutrals rather than fighting them.                                 */

  --char:          #1f1a1b;   /* dark panels and badges                       */
  --char-deep:     #171314;   /* the dark section band                        */
  --char-ink:      #121315;   /* footer — the live site's own dark            */

  /* ---- Semantic ----------------------------------------------------------- */

  /* --danger sits close to --red on purpose; nothing on the page uses it yet,
     but if a form comes back, give it a distinct tone first.                 */
  --danger:        #a32b1c;
  --danger-bg:     #fbeae7;
  --success:       #1f6a4d;
  --success-bg:    #e4f1eb;

  /* Bright enough to clear 3:1 on every ground the page has — --ground 4.3:1,
     --tint 3.8:1, --char-ink 4.3:1. The one exception is a --red panel, where
     base.css switches the ring to white.                                     */
  --focus:         #d94452;

  /* ---- Type ---------------------------------------------------------------
     Display carries the brand; body does the reading; the label face is the
     body face at small size with tracking, so no third webfont is loaded.    */

  --font-display:  "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:         0.75rem;    /* 12px — labels, badges                       */
  --fs-sm:         0.875rem;   /* 14px — captions, tags                       */
  --fs-base:       1rem;       /* 16px — body                                 */
  --fs-md:         1.125rem;   /* 18px — lede                                 */
  --fs-lg:         1.375rem;   /* 22px — card titles                          */
  --fs-xl:         clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);   /* section h2   */
  --fs-2xl:        clamp(2.5rem, 1.4rem + 5.2vw, 5rem);       /* hero h1      */

  --lh-tight:      1.1;
  --lh-snug:       1.3;
  --lh-body:       1.65;

  --tracking-label: 0.14em;

  --measure:       64ch;

  /* ---- Space --------------------------------------------------------------
     A 4px-based scale. Section rhythm comes from --space-section only.       */

  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-5:       1.5rem;
  --space-6:       2rem;
  --space-7:       3rem;
  --space-8:       4rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  --shell-max:     78rem;
  --shell-pad:     clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Form ---------------------------------------------------------------
     44px is the WCAG 2.5.5 target size floor; every control derives from it. */

  --tap-min:       44px;
  --radius-sm:     6px;
  --radius:        12px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  --shadow-card:   0 1px 2px rgb(28 25 23 / 0.04),
                   0 8px 24px -12px rgb(28 25 23 / 0.14);
  --shadow-lift:   0 2px 4px rgb(28 25 23 / 0.06),
                   0 18px 40px -18px rgb(28 25 23 / 0.22);

  /* ---- Motion -------------------------------------------------------------
     A single duration token, so `prefers-reduced-motion` can zero all motion
     from one place in base.css rather than per-component.                    */

  --dur:           520ms;
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
}