/* Love Beach Club & Resort — the machine values.
 *
 * READ kit.md BEFORE USING ANY OF THESE. The kit says what each value is FOR.
 * A hex with no job attached is how the wrong pink ships.
 *
 * Six colours are the approved Canva palette, confirmed by Augustine Noppe on
 * 22 September 2026. Grey was added the same day, from the live site, because
 * the palette had no body-copy colour. The type was ruled the same day.
 *
 * Nothing here is invented. A value this file does not carry is a gap to
 * raise, never a value to make up.
 *
 * THREE LAYERS (M2 round 2, 25 September 2026). Rules in design/BRIEF.md.
 *   1. --love-*   the palette and the faces. This venue's own values.
 *   2. --ui-*     the system: spacing, sizes, type scale, motion, layers.
 *                 The same at every venue.
 *   3. --brand-*  the roles: which palette colour, face, corner and shadow
 *                 does which job. A venue's own mapping.
 * The back end (staff, scanning, management) reads --ui-* and --brand-*
 * ONLY. A second venue ships its own layer 1 and layer 3 under the same
 * names, and every back-end screen wears its brand with no code changed.
 */

:root {
  /* ===================================================================== */
  /* LAYER 1. THE PALETTE AND THE FACES. --love-*                           */
  /* ===================================================================== */

  /* --- The palette. Seven colours, and only seven. ---------------------- */
  --love-coral:     #f86271; /* the loud one. Buttons, links, the logo */
  --love-rose:      #e89eaa; /* sub-headings and accents. Never body text */
  --love-pink:      #ffc5ce; /* blocks and panels behind content */
  --love-pink-pale: #ffe7ea; /* wide calm areas, footers, cards */
  --love-blush:     #fff9f8; /* the page itself. The default background */
  --love-ink:       #2f3032; /* headings, and any word that must be sharp */
  --love-grey:      #636264; /* body copy. Added to the palette 22 Sep 2026 */

  --love-white:     #ffffff; /* not in the palette. Paper and knockouts only */

  /* --- Status. Alerts and field errors ONLY, never the brand. ----------- */
  /* Ruled by Augustine Noppe, 23 September 2026. See kit.md, section 2. */
  --love-error:        #c62f3b; /* needs action, field errors. White on it */
  --love-warning:      #9a5a00; /* limits and stops: icon and text */
  --love-warning-tint: #fdebc8; /* the circle behind the warning icon */
  /* State colours (DESIGN.md s1, ruled by Augustine Noppe 14 October 2026): also
     badges, booking detail, door results and promo on and off, each always with
     its own icon and words. Deep text and icon at 4.5:1 or better on its tint. */
  --love-good:         #1d6b3c; /* good: deep text and icon */
  --love-good-tint:    #e4f5ea; /* good: the fill */
  --love-good-mark:    #2e9e5b; /* good: the mark, never words */
  --love-info:         #05656b; /* info: deep text and icon */
  --love-info-tint:    #dff3f4; /* info: the fill */
  --love-error-tint:   #fde8ea; /* bad: the fill. --love-error stays the text and icon */
  --love-neutral-tint: #efedee; /* neutral: the fill. Text and icon are --love-grey */

  /* --- Map areas. The booking map ONLY, never the brand. ---------------- */
  /* Ruled by Augustine Noppe, 24 September 2026. See kit.md, section 2. */
  --love-map-poolside: #05a2ac; /* pool teal */
  --love-map-seaview:  #bd891d; /* lantern gold, VIP Seaview */
  --love-map-dining:   #b27fc9; /* night-light lilac, Restaurant */
  --love-map-upstairs: var(--love-coral); /* Upstairs VIP */

  /* --- Type. Ruled 22 September 2026. ----------------------------------- */
  /* Garet: headings and display. Book and Heavy only, the two cuts that
   * exist. Commercial. Files in fonts/garet/. Check the licence before
   * publishing it as a web font. */
  --love-font-display: 'Garet', 'Poppins', system-ui, sans-serif;

  /* Poppins: body, buttons, labels, every interface. Open licence.
   * Files in fonts/poppins/ttf/. Web: fonts.googleapis.com. */
  --love-font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* Awesome Ways: script accent, sparingly. A ligature script, so it joins.
   * Envato licence held by Augustine. Files in fonts/awesome-ways/. */
  --love-font-script:  'Awesome Ways', cursive;

  /* Weights in use */
  --love-weight-body: 400;
  --love-weight-mid:  500;
  --love-weight-bold: 700;

  /* Letter spacing in use */
  --love-track-body:    0.8px;
  --love-track-eyebrow: 3.2px; /* the small spaced-out labels above headings */

  /* ===================================================================== */
  /* LAYER 2. THE SYSTEM. --ui-*. The same at every venue.                  */
  /* Added 24 and 25 September 2026 for the booking system. Every value was */
  /* MEASURED from the approved v28 booking (design/concepts/booking.js)    */
  /* unless its comment says PROPOSED. A PROPOSED value is listed on the    */
  /* replica's Acceptance page for Augustine to rule.                       */
  /* ===================================================================== */

  /* --- Spacing. An 8 px rhythm, with 4 and 12 for tight places. -------- */
  --ui-space-1: 4px;  /* icon to its word, lines inside a list */
  --ui-space-2: 8px;  /* label to field, between buttons, between cards */
  --ui-space-3: 12px; /* inside pills and chips, the × from a popup's edge */
  --ui-space-4: 16px; /* between fields, inside a card, the phone's side margin */
  --ui-space-5: 24px; /* between blocks, inside a popup, the tablet's side margin */
  --ui-space-6: 32px; /* the foot of a page, the desktop's side margin */
  --ui-space-7: 48px; /* PROPOSED: between sections of a long page on a desktop */
  --ui-space-pill: 6px; /* inside the toolbar pill and the key */

  /* --- Lines, rings and the press floor. ------------------------------ */
  --ui-line:         1px; /* a card edge, a field at rest, a divider */
  --ui-line-strong:  2px; /* a field in focus or in error, a chosen card */
  --ui-focus-w:      3px; /* the keyboard focus ring */
  --ui-focus-offset: 2px; /* its gap from the thing it rings */
  --ui-focus-line:   2px; /* round 5: the Coral keyboard line on staff, the door and the sign-in. The guest keeps --ui-focus-w */
  --ui-scrollbar-w:  10px; /* round 5: the scroll bar's track */
  --ui-scrollbar-thumb: 4px; /* round 5: and its thumb, inside a 3px clear border */
  --ui-tap-min:     44px; /* NOTHING smaller than this can be pressed */
  --ui-tap-gap:      8px; /* PROPOSED: the least room between two press targets */

  /* --- Control sizes. -------------------------------------------------- */
  --ui-field-h:      48px; /* every field; 16 px text so a phone never zooms */
  --ui-button-slim-h: 36px; /* the slim secondary button, one line (M6 polish decision J, 7 Oct 2026); its press area stays --ui-tap-min. Now the page-header action's height too */
  /* THE LOOK (14 October 2026). Staff, door and guest all read the -look names
     (spec decision 13: the plain 52px and 48px names are retired with the guest's look). */
  --ui-button-h-look:  40px; /* the coral button's visible height; the press area stays --ui-tap-min */
  --ui-button2-h-look: 40px; /* every other button's visible height */
  --ui-btn-px:        var(--ui-space-4); /* a button's side padding */
  --ui-badge-px:      var(--ui-space-3); /* a badge's side padding */
  --ui-progress-h:     8px; /* a progress bar */
  --ui-chart-h:      160px; /* the sales chart */
  --ui-chart-h-wide: 240px; /* the sales chart in a two-column page */
  --ui-radius-bar:     4px; /* a chart bar's corner */
  --ui-row-h:        48px; /* PROPOSED: a list row, a menu item */
  --ui-row-tall:     64px; /* PROPOSED: a booking row, a plan tile */
  --ui-badge-h:      26px; /* PROPOSED: a badge, the switch */
  --ui-count-w:      28px; /* PROPOSED: a stepper's number, a key swatch */
  --ui-avatar:       40px; /* PROPOSED: initials in a circle, beside a person's name */
  --ui-avatar-small: 32px; /* PROPOSED: the same, in a dense list */
  --ui-grabber-w:    36px; /* PROPOSED: the handle at the top of a sheet */
  --ui-grabber-h:     5px; /* PROPOSED */
  --ui-alert-icon:   40px; /* the tinted circle above an alert's title */
  --ui-mark:         72px; /* PROPOSED: the scan result's circle */
  --ui-mark-icon:    40px; /* PROPOSED: its icon */
  --ui-qr:           200px; /* the paid page's QR code, at most */
  --ui-skeleton-line: 14px; /* PROPOSED: one line of a skeleton, the small text size */

  /* --- Icons. One set, "Love Line": a 24 px grid, a 1.75 stroke, round
     ends. Every icon is named in design/brief/icons.js. ------------------- */
  --ui-icon-small:  16px; /* inside a small word: a back chevron, a done tick */
  --ui-icon:        20px; /* alerts, the popup ×, menu items */
  --ui-icon-large:  24px; /* the toolbar, the tab bar, map pins */
  --ui-icon-xl:     32px; /* an empty page's icon, inside its 72px disc */
  --ui-empty-disc:  72px; /* the neutral disc on an empty page */
  --ui-icon-stroke: 1.75; /* the stroke at every size */

  /* --- Layout. Widths, bars and columns. ------------------------------- */
  --ui-prompt-max:  400px; /* a prompt's width */
  --ui-popup-max:   520px; /* a popup's width, both sides */
  --ui-popup-tall:  560px; /* drinks and checkout */
  --ui-page-narrow: 640px; /* PROPOSED: a form page's widest */
  --ui-app-max:     560px; /* PROPOSED: the scanning app's widest */
  --ui-read-max:     60ch; /* the longest line of reading text. Was 64ch: at 14px Poppins that gave 77 characters */
  --ui-title-bar-h-desk: 64px; /* round 5: the desk title bar at the top of the white panel */
  --ui-detail-side:  340px; /* round 5: the side column of a detail page, from 880px of content */
  --ui-search-max-desk: 400px; /* round 5: the search's widest on desk */
  --ui-title-bar-h:  52px; /* the staff title bar on a phone and tablet: a back arrow, a title, an optional right slot (15 Oct 2026; no avatar since round 5) */
  --ui-split-min:   880px; /* the content width where a page goes to two columns. A container query cannot read a variable, so the code repeats it */
  --ui-tabbar-h:     64px; /* PROPOSED: the back end's bottom bar on a phone and tablet */
  --ui-rail-w:      232px; /* PROPOSED: the side menu, 1024 px and up */
  --ui-label-w:     132px; /* PROPOSED: the label column beside a fact */
  --ui-facts-w:     112px; /* round 5: the label column of a booking card (120 in the main column, 96 in the side one) */
  --ui-tile-min:     96px; /* PROPOSED: a plan tile's narrowest */
  --ui-area-h:       96px; /* PROPOSED: a note field */
  --ui-gutter-phone:   16px; /* PROPOSED: side margin under 768 px */
  --ui-gutter-tablet:  24px; /* PROPOSED: 768 to 1023 px */
  --ui-gutter-desktop: 32px; /* PROPOSED: 1024 px and up */
  --ui-cols-phone:    4; /* PROPOSED: grid columns under 768 px */
  --ui-cols-tablet:   8; /* PROPOSED */
  --ui-cols-desktop: 12; /* PROPOSED */
  /* Screen widths. A media query cannot read a variable, so the code repeats
     these numbers; the check reads them from here and fails any other. */
  --ui-bp-tablet:   768px;  /* PROPOSED: a tablet held upright */
  --ui-bp-desktop: 1024px;  /* PROPOSED: a tablet on its side, a laptop */
  --ui-bp-wide:    1440px;  /* PROPOSED: a large desktop */
  /* The phone's own edges: the notch above, the home bar below. */
  --ui-safe-top:    env(safe-area-inset-top, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left:   env(safe-area-inset-left, 0px);
  --ui-safe-right:  env(safe-area-inset-right, 0px);

  /* --- Type sizes. The scale, in Poppins, weights from layer 1. -------- */
  --ui-text-figure: 28px; /* PROPOSED: the money line, the scan result */
  --ui-text-total:  22px; /* the checkout total, the paid page's title */
  --ui-text-title:  20px; /* popup titles, prices, the booking reference */
  --ui-text-bar-top:   22px; /* the title bar's title on a top screen, bold (15 Oct 2026) */
  --ui-text-bar-inner: 18px; /* the title bar's title on an inner screen, bold (15 Oct 2026) */
  --ui-text-body:   16px; /* fields and main lines */
  --ui-text-read:   15px; /* prompt words */
  --ui-text-small:  14px; /* labels, secondary lines */
  --ui-text-note:   13px; /* notes under fields, counts */
  --ui-text-tag:    12px; /* PROPOSED: a table code on the plan, a badge count */
  --ui-text-tiny:   11px; /* the artist's impression line only */
  /* Line height, per role: tight on large type, open on reading type.
     "Line spacing between words slightly reduced. Make it global going
     forward": Augustine Noppe, 30 September 2026. One small step down on
     the three that hold more than one line; figures and controls were
     already tight. The frozen v28 guest screens keep their own measured
     numbers until he rules on them (design/brief/NOTES.md). */
  --ui-lead-figure: 1.15; /* PROPOSED: figures and the scan result */
  --ui-lead-title:  1.25; /* titles. Ruled 30 Sep 2026: was 1.3, measured on v28's popup titles */
  --ui-lead-control: 1.2; /* words inside a field or a button */
  --ui-lead-body-look:  1.5; /* reading text, both sides (DESIGN.md s3). The plain --ui-lead-body (1.4) is retired */
  --ui-lead-label-look: 1.4; /* 12px labels and notes. The plain --ui-lead-label (1.3) is retired */
  --ui-lead-name-look:  1.3; /* a person's name, 16px / 500 */
  /* Letter spacing, per role: a little tighter as type grows. */
  --ui-track-figure: -0.01em; /* PROPOSED */
  --ui-track-title:   0;      /* PROPOSED */
  --ui-track-body:    0;      /* PROPOSED */
  --ui-track-tag:     0;      /* 12 px and under. Was 0.02em; the staff map was its only reader */
  --ui-track-sub:    -0.18px; /* the 20px figure and the 20px section title */

  /* --- Layers, bottom to top. ------------------------------------------ */
  --ui-z-map:    0;  /* the map and the page */
  --ui-z-chrome: 10; /* PROPOSED: the toolbar, chips, the key, bars */
  --ui-z-popup:  20; /* a popup or a sheet and its backdrop */
  --ui-z-ghost:  21; /* a popup on its way out */
  --ui-z-menu:   25; /* PROPOSED: an open dropdown menu, over any popup */
  --ui-z-toast:  30; /* the one polite status line */

  /* --- Opacity. -------------------------------------------------------- */
  --ui-opacity-disabled: 0.45; /* PROPOSED: a control that cannot be pressed yet */
  --ui-opacity-busy:     0.72; /* PROPOSED: a button while it works */
  --ui-opacity-held:     0.6;  /* the coral button while the payment runs, v28 */

  /* --- Motion. Rules in design/BRIEF.md, section 8. -------------------- */
  --ui-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* every entrance */
  --ui-ease-move:   cubic-bezier(0.77, 0, 0.175, 1);  /* PROPOSED: moving on screen: a list making room */
  --ui-ease-sheet:  cubic-bezier(0.32, 0.72, 0, 1);   /* PROPOSED: a sheet rising, the iOS curve */
  --ui-dur-spin:        800ms; /* a busy ring turns once */
  --ui-dur-logo-in:     500ms; /* the sign-in logo fades in once: opacity 0 to 1, ease-out; off under reduced motion (15 Oct 2026) */
  --ui-scale-logo-in:    0.96; /* ... and grows from this to 1 */
  --ui-dur-press:       140ms; /* a press scales down and back */
  --ui-dur-hover:       150ms; /* PROPOSED: a colour change under a mouse */
  --ui-dur-popup-in:    220ms; /* a popup enters */
  --ui-dur-popup-out:   150ms; /* and leaves faster than it came */
  --ui-dur-menu-in:     160ms; /* PROPOSED: a dropdown menu opens */
  --ui-dur-menu-out:    100ms; /* PROPOSED: and closes */
  --ui-dur-scrim:       200ms; /* the backdrop fades */
  --ui-dur-page:        200ms; /* PROPOSED: one back-end page gives way to the next */
  --ui-dur-sheet-in:    300ms; /* PROPOSED: a sheet rises */
  --ui-dur-sheet-out:   200ms; /* PROPOSED: and falls */
  --ui-dur-list:        200ms; /* PROPOSED: a row arrives or leaves */
  --ui-dur-number:      180ms; /* PROPOSED: a figure changes */
  --ui-dur-ticket:      260ms; /* the paid ticket rises */
  --ui-dur-push:        280ms; /* round 5: opening a booking slides in, and Back */
  --ui-dur-rise:        260ms; /* round 5: rows and cards settle in */
  --ui-dur-draw:        420ms; /* round 5: the green success tick draws once */
  --ui-dur-shimmer:    1200ms; /* round 5: the loading shimmer, linear */
  --ui-stagger:          30ms; /* round 5: the gap between rows settling in */
  --ui-dur-reduced-in:  160ms; /* reduced motion: a plain fade in */
  --ui-dur-reduced-out: 120ms; /* reduced motion: a plain fade out */
  --ui-scale-press:       0.97; /* buttons, chips, rows */
  --ui-scale-press-small: 0.95; /* close, back, the photo strip */
  --ui-scale-press-round: 0.92; /* the zoom buttons */
  --ui-scale-popup-in:    0.96; /* a popup starts at this scale */
  --ui-scale-popup-out:   0.97; /* and ends at this one */
  --ui-rise:     12px; /* the paid ticket rises this far */
  --ui-rise-page: 8px; /* PROPOSED: a back-end page rises this far */
  /* Springs: no bounce anywhere. Damping 1, "response" in Apple's sense. */
  --ui-spring-map:    420ms; /* the map's pan and zoom */
  --ui-spring-sheet:  300ms; /* PROPOSED: a sheet let go of */
  --ui-map-decay:     0.996; /* a flick's glide, per millisecond */
  --ui-map-rubber:    0.55;  /* resistance past an edge, map and sheet */
  --ui-map-staff-h:   min(72vh, 760px); /* PROPOSED: the staff and management map's height */
  --ui-map-staff-min: 360px; /* PROPOSED: and never shorter */
  --ui-map-staff-h-small: min(56vh, 420px); /* PROPOSED: on a phone, so the page still scrolls past it */
  --ui-menu-max:      320px; /* PROPOSED: an open dropdown menu scrolls past this */
  --ui-menu-min:      220px; /* round 5: the staff open list and the account menu are never narrower */
  --ui-pick-date-w:   312px; /* round 5: the date drop-down on desk */
  --ui-pick-time-max: 280px; /* the time list on desk scrolls past this */
  --ui-pick-card-w:   360px; /* the picker widget card from 768px; 16px from the sides under it */
  --ui-pick-card-h:   360px; /* the time list inside the card scrolls past this */
  --ui-flick:         0.11;  /* PROPOSED: px per ms; a flick this fast closes a sheet */
  --ui-sheet-close:   100px; /* round 5: a sheet dragged down past this closes */

  /* ===================================================================== */
  /* LAYER 3. THE ROLES. --brand-*. What each job wears at this venue.      */
  /* The back end reads these, never layer 1. PROPOSED as a set, 25 Sep.   */
  /* ===================================================================== */

  /* Grounds */
  --brand-page:    var(--love-blush);     /* the page itself */
  --brand-surface: var(--love-white);     /* cards, fields, the table plan */
  --brand-raised:  var(--love-blush);     /* popups and sheets, as v28's */
  --brand-wash:    var(--love-pink-pale); /* a chosen row, a skeleton. Not the side menu: page colour, ruled 30 Sep 2026 */
  --brand-panel:   var(--love-pink);      /* a block behind content */
  --brand-line:    var(--love-pink);      /* a field's block edge. The guest still draws card edges and dividers with it */
  --brand-hairline: var(--love-pink-pale); /* a card's edge and every list divider (the look) */
  --brand-track-line: var(--love-pink);   /* the outline of a progress bar's white track (the look) */
  --brand-edge:    var(--love-grey);      /* a field's edge at rest */
  /* Words */
  --brand-text:    var(--love-grey);      /* body copy */
  --brand-strong:  var(--love-ink);       /* headings, labels, figures, any sharp word */
  /* Pressing */
  --brand-action:     var(--love-coral);  /* the ONE main button on a screen. 19 px bold white only */
  --brand-on-action:  var(--love-white);
  --brand-action-hover: color-mix(in srgb, var(--love-coral) 88%, var(--love-ink)); /* PROPOSED */
  --brand-select:     var(--love-ink);    /* a switch and a chosen chip. Tabs, the bottom bar and the side menu no longer use it */
  --brand-on-select:  var(--love-blush);
  --brand-focus:      var(--love-coral);  /* round 5: the keyboard line on buttons and links, and a focused field's edge. The guest reads --brand-strong, so it keeps its ink ring */
  --brand-focus-glow: 0 0 0 3px var(--love-pink-pale); /* round 5: the soft glow round a focused field, an open picker and the search */
  /* Status. Alerts and errors only. */
  --brand-error:        var(--love-error);
  --brand-on-error:     var(--love-white);
  --brand-error-hover:  color-mix(in srgb, var(--love-error) 88%, var(--love-ink)); /* PROPOSED */
  --brand-warning:      var(--love-warning);
  --brand-warning-tint: var(--love-warning-tint);
  --brand-error-tint:   var(--love-error-tint);
  --brand-error-glow:   0 0 0 3px var(--love-error-tint); /* round 5: the glow round a field in error */
  /* The other state roles (ruled 14 October 2026). Every one with its icon and words. */
  --brand-good:         var(--love-good);
  --brand-good-tint:    var(--love-good-tint);
  --brand-good-mark:    var(--love-good-mark);
  --brand-info:         var(--love-info);
  --brand-info-tint:    var(--love-info-tint);
  --brand-info-mark:    var(--love-map-poolside);
  --brand-neutral-tint: var(--love-neutral-tint);
  /* The selected tab (DESIGN.md s9.8, s9.9, option C): a Pink disc behind the ink icon. */
  --brand-active-bar:   var(--love-coral);
  --brand-active-disc:  var(--love-pink);
  /* An avatar: ink with white initials, in the side menu and the More sheet only. */
  --brand-avatar-bg:    var(--love-ink);
  --brand-avatar-text:  var(--love-white);
  /* Depth */
  --brand-shadow-popup: 0 24px 64px color-mix(in srgb, var(--love-ink) 28%, transparent); /* popups, sheets */
  --brand-shadow-float: 0 4px 14px color-mix(in srgb, var(--love-ink) 18%, transparent);  /* chrome over the page */
  --brand-shadow-card: 0 0 0 1px color-mix(in srgb, var(--love-ink) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--love-ink) 12%, transparent); /* a staff card, tile and row floats: a 1px edge and a soft drop (14 Oct 2026) */
  --brand-divider: var(--love-neutral-tint); /* round 5: dividers inside a card, a table, a menu and the More sheet */
  --brand-shadow-menu: 0 8px 24px color-mix(in srgb, var(--love-ink) 8%, transparent); /* round 5: an open list, a drop-down picker and a menu */
  --brand-edge-light: color-mix(in srgb, var(--love-grey) 35%, var(--love-white)); /* round 5: the 1px edge of a label badge, and of every field, plain button, search, menu, desk card and table, and the scroll bar thumb (--brand-edge, Grey, is the hover edge) */
  --brand-scrim: color-mix(in srgb, var(--love-ink) 45%, transparent); /* the backdrop behind a popup; stacked, the shade over a photo band (kit s5, 29 Sep 2026) */
  --brand-glass: color-mix(in srgb, var(--love-blush) 90%, transparent); /* bars over moving content */
  /* Corners */
  --brand-radius-popup: 24px; /* every popup, prompt and sheet */
  --brand-radius-card-look: 12px; /* cards, photographs and tickets, both sides. The 16px --brand-radius-card is retired */
  --brand-radius-ghost:  8px; /* the bordered header action */
  --brand-radius-menu:  16px; /* round 5: the staff open list and the account menu */
  --brand-radius-field: 12px; /* fields, the hold row, alerts */
  --brand-radius-mark:   8px; /* a table on the map or the plan */
  --brand-radius-tag:    6px; /* a code tag */
  --brand-radius-pill: 999px; /* buttons, chips, badges, bars */
  /* Faces. Poppins on every screen, both sides. Never Garet or Awesome
     Ways on a web page: they are licensed (kit s3). */
  --brand-font:        var(--love-font-body);
  --brand-weight-body: var(--love-weight-body);
  --brand-weight-mid:  var(--love-weight-mid);
  --brand-weight-bold: var(--love-weight-bold);
  --brand-text-button: 19px; /* the coral button, bold: the kit's floor for white on coral */
  /* The mark. The coral lock-up, no hashtag (kit s4), in every bar and
     header; the white one on a photograph or on coral. The heart alone only
     for favicons and app icons. Paths from this file. */
  --brand-logo-hero:   100px; /* the white lock-up over a page's photo band, ruled by Augustine Noppe 29 Sep 2026 */
  --brand-logo-chip:    72px; /* the coral lock-up inside the guest map's desktop chip, 32px tall so the 56px chip keeps 12px of air above and below, ruled by Augustine Noppe 17 Oct 2026 (was 100px, 2 Oct) */
  --brand-logo-guest:  128px; /* the coral lock-up wherever a guest screen or email shows it, at most: the paid page, the pre-sale page, the loading screen, the not-found card, every guest email. Ruled by Augustine Noppe 15 October 2026 (spec decision 17) */
  --brand-logo-rail:    96px; /* the coral lock-up at the top of the computer side menu, at most; no logo bar anywhere else in the staff app, ruled by Augustine Noppe 15 October 2026 */
  --brand-logo-signin: 128px; /* the coral lock-up on the staff sign-in, the one other place a staff screen shows it, ruled by Augustine Noppe 15 October 2026 */
  --brand-mark-min:     24px; /* the heart alone, never smaller (kit s4) */
  --brand-logo:        url("logo/svg/love-logo-coral.svg");
  --brand-logo-white:  url("logo/svg/love-logo-white.svg");
  --brand-logo-ratio:  2348.61 / 1054.98;
  --brand-heart:       url("logo/love-heart.png");
  --brand-heart-ratio: 2129 / 2061;

  /* ===================================================================== */
  /* The customer side's names for the system values. v28 was measured in  */
  /* these names on 24 September; they now point at layer 2, same values. */
  /* ===================================================================== */
  --love-space-1: var(--ui-space-1);
  --love-space-2: var(--ui-space-2);
  --love-space-3: var(--ui-space-3);
  --love-space-4: var(--ui-space-4);
  --love-space-5: var(--ui-space-5);
  --love-space-6: var(--ui-space-6);
  --love-space-pill: var(--ui-space-pill);

  --love-radius-popup: var(--brand-radius-popup);
  --love-radius-card:  var(--brand-radius-card-look);
  --love-radius-photo: var(--brand-radius-card-look);
  --love-radius-field: var(--brand-radius-field);
  --love-radius-mark:  var(--brand-radius-mark);
  --love-radius-tag:   var(--brand-radius-tag);
  --love-radius-key:   3px; /* the swatches in the map's key */
  --love-radius-pill:  var(--brand-radius-pill);

  --love-shadow-popup: var(--brand-shadow-popup);
  --love-shadow-float: var(--brand-shadow-float);
  --love-scrim:        var(--brand-scrim);
  --love-glass:        var(--brand-glass);

  --love-tap-min:    var(--ui-tap-min);
  --love-field-h:    var(--ui-field-h);
  --love-button-h:   var(--ui-button-h-look);
  --love-button2-h:  var(--ui-button2-h-look);
  --love-alert-icon: var(--ui-alert-icon);
  --love-prompt-max: var(--ui-prompt-max);
  --love-popup-max:  var(--ui-popup-max);
  --love-popup-tall: var(--ui-popup-tall);

  --love-text-total:  var(--ui-text-total);
  --love-text-title:  var(--ui-text-title);
  --love-text-button: var(--brand-text-button);
  --love-text-body:   var(--ui-text-body);
  --love-text-read:   var(--ui-text-read);
  --love-text-small:  var(--ui-text-small);
  --love-text-note:   var(--ui-text-note);
  --love-text-tiny:   var(--ui-text-tiny);

  --love-ease-out:        var(--ui-ease-out);
  --love-dur-press:       var(--ui-dur-press);
  --love-dur-popup-in:    var(--ui-dur-popup-in);
  --love-dur-popup-out:   var(--ui-dur-popup-out);
  --love-dur-scrim:       var(--ui-dur-scrim);
  --love-dur-ticket:      var(--ui-dur-ticket);
  --love-dur-reduced-in:  var(--ui-dur-reduced-in);
  --love-dur-reduced-out: var(--ui-dur-reduced-out);
  --love-scale-popup-in:  var(--ui-scale-popup-in);
  --love-scale-popup-out: var(--ui-scale-popup-out);
  --love-scale-press:     var(--ui-scale-press);
  --love-map-spring:      var(--ui-spring-map);
  --love-map-decay:       var(--ui-map-decay);
  --love-map-rubber:      var(--ui-map-rubber);
  --love-hold-low:        120s;  /* PROPOSED: the hold's last two minutes turn amber */
  --love-loading-mark:    36px;  /* PROPOSED: the heart while the map arrives */

  /* ===================================================================== */
  /* Page and card spacing, phone first (DESIGN.md s8). The steps follow    */
  /* below. A media query cannot read a variable, so 768px and 1024px are   */
  /* repeated from --ui-bp-tablet and --ui-bp-desktop.                      */
  /* ===================================================================== */
  --ui-card-pad:       var(--ui-space-4); /* inside a card */
  --ui-page-top:       var(--ui-space-2); /* under the title bar (round 5: 8px, then 24px on desk) */
  --ui-page-bottom:    var(--ui-space-5); /* under a page's last card */
  --ui-section-gap:    var(--ui-space-3); /* between a page's blocks (round 5: 12px, then 16px from 768px) */
}

@media (min-width: 768px) {
  :root {
    --ui-card-pad:    var(--ui-space-5);
    --ui-page-bottom: var(--ui-space-6);
    --ui-section-gap: var(--ui-space-4);
  }
}

@media (min-width: 1024px) {
  :root {
    --ui-page-top:    var(--ui-space-5);
    --ui-page-bottom: var(--ui-space-7);
  }
}

/* BOOK Ragfont is RETIRED. Ruled 22 September 2026. It is still live on the
 * Wix site headings and that is a fault to fix, not a value to copy. */