/* ==========================================================================
   Preheat: the palette, type and scale. Values only.
   Palette and component shapes come from the product demo at
   marketing/landing/public/demo.html. If a screen here and that demo
   disagree, the demo wins.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party request) ---------- */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/figtree-latin-7367b47d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/figtree-latin-ext-803c13e2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dmserif-latin-dd23de7b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dmserif-latin-ext-5a8b4d02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --cream: #fbf5ec;
  --cream-warm: #fdfaf3;
  --cream-deep: #f4eddc;
  --cream-note: #f7f1e4;
  --surface: #ffffff;

  --ink: #2b1b12;
  --ink-soft: #5f4c36;
  /* rivet:context: #7a6250 and not #8a7462, and the old value was a WCAG
     failure rather than a taste. It measured 4.07:1 on --cream against the
     4.5:1 normal text needs, and it carries .eyebrow, .lede, .rows__key,
     .field__label, .hint and the tab bar's labels: most of the quiet text in
     the product. The landing site fixed the same colour to this exact value
     some time ago, with a comment saying so, and the app never got it.

     There used to be a --muted-2 below this at 3.04:1 for a "quieter still"
     tier. It is gone rather than darkened, because at AA there is no room for
     a third tier: anything light enough to read as quieter than this fails,
     and anything that passes is indistinguishable from it. Two tiers of quiet
     text, --ink-soft and --muted, is what the contrast floor actually allows. */
  --muted: #7a6250;

  /* Not for text. It is 2.34:1 and it used to carry placeholders, the calendar
     weekday row and the storefront footer, all of which are text and all of
     which now use --muted. What is left is two hover borders, where a contrast
     floor for text does not apply.

     --faintest sat below this at 1.68:1 and is gone for the same reason
     --muted-2 is. Its one user was the base .cal__day, which is to say every
     date a customer cannot book: on the demo form that is 24 of 30 numerals on
     the picker, unreadable. The exemption for disabled controls does not cover
     them, because a date grid is read as a grid — you find the open Saturday by
     counting from the numbers around it. Availability is carried by the card
     and its border, so the ink can meet the floor without a closed day reading
     as bookable. */
  --faint: #b3a084;

  --line: #eadfcc;
  --line-soft: #f4ecdd;
  --line-strong: #e2d4bc;

  --raspberry: #c2255c;
  --raspberry-deep: #9c1b49;
  --raspberry-tint: #fdecf2;
  --raspberry-line: #f2c1d3;

  --sage: #3f7d4e;
  --sage-deep: #2f5c3a;
  --sage-text: #33562e;
  --sage-tint: #eef4ea;
  --sage-line: #cfe0c8;

  --amber: #b97f26;
  --amber-tint: #f7ecd8;
  --amber-line: #ecd9b4;
  --amber-text: #7a5a17;

  /* Roles rather than shades. These exist so that no rule outside this file
     writes a hex, which is what makes a palette change a one-file edit. */
  --on-accent: #ffffff; /* text and marks on a saturated fill */
  --ink-pressed: #1d110a;
  --disabled-bg: #e8dcc4;
  --disabled-fg: #a08a72;
  --switch-off: #ded2bc;
  --closed-swatch: #e8dfcc;
  --scrollbar: #d8c6a6;
  --avatar-from: #f0b7cd; /* gradient start; it ends at --raspberry */

  /* Stands in for a photo that has not loaded or was never uploaded. */
  --photo-from: #f6dfc4;
  --photo-mid: #e0a17c;
  --photo-to: #b46a4e;

  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    sans-serif;
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  --radius-card: 16px;
  --radius-panel: 14px;
  --radius-button: 13px;
  --radius-chip: 12px;
  --pill: 99px;

  --shadow-card: 0 1px 2px rgba(43, 27, 18, 0.04);
  --shadow-float: 0 12px 32px rgba(43, 27, 18, 0.14);
  --shadow-sheet: 0 -8px 28px rgba(43, 27, 18, 0.1);

  /* The navigation is the one glass surface in the app. Everything else stays
     opaque, because the demo is flat and warm and a second visual language is
     not free. Tinted toward --white rather than pure white so the cream
     underneath reads through as warmth rather than grey. */
  --glass: rgba(255, 253, 248, 0.72);
  --glass-line: rgba(43, 27, 18, 0.08);
  --glass-blur: saturate(180%) blur(20px);

  --gutter: 18px;
  --gutter-wide: 28px;
  --app-width: 460px;
  --app-width-wide: 560px; /* the content column once a sidebar is beside it */
  --app-width-desk: 1120px; /* and once there is room for a rail beside that */
  --rail-width: 340px;
  --sidebar-width: 232px;

  /* rivet:context: Documentation, not a source of truth, and the difference
     has already cost someone an afternoon. A media query prelude cannot
     resolve var(), so `@media (min-width: var(--sidebar-from))` does not work
     and the real 900 is written out in screens.css. This token is declared,
     reads like the definition, and is referenced by nothing.

     It is kept because it is the only place the number is named in prose, not
     because anything reads it. A previous version of this note claimed a check
     asserted the two agreed; no such check exists, and a note that invents its
     own enforcement is worse than no note. The desk tier's 1280 is deliberately
     NOT given a token here for the same reason. */
  --sidebar-from: 900px;
}