/* ==========================================================================
   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;
  --muted: #8a7462;
  --muted-2: #a08a72;
  --faint: #b3a084;
  --faintest: #cbbfa9;

  --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;
  --struck: #c9b8a0; /* the number on a day that is full */
  --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;
  --app-width: 460px;
  --app-width-wide: 560px; /* the content column once a sidebar is beside it */
  --sidebar-width: 232px;

  /* Below this the nav is a bottom bar, above it a sidebar. Chosen so a
     tablet in portrait still gets the bar it is shaped for. */
  --sidebar-from: 900px;
}