/* Riviera (F-31, design §7): a look into a Ligurian kitchen. Apricot wall,
   coral and sand cupboards, olive as the accent, values taken from
   the round-2 canvas (design B). Loaded after tailwind.css, it overrides the
   default design's token values (static/css/input.css); it adds no rules of
   its own, so the templates stay the same for every design. Dark is the same
   kitchen at night (F-33): a moonlit room under its warm lamp, a near-black
   page with aubergine cards and bars (Melanzana), cream text, wisteria
   (Glicine) as the accent, calm on the page and on the cards alike, olive
   step numbers, categories in a light plum and tags in olive that both
   stand off the cards, the title shutters kept green, and danger turned
   rose. */

/* Fraunces 500 for headings and, in italic, the dish in the wordmark; Karla
   400–700 for text. Self-hosted (AGENTS §6, see README). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-500.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: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext-500.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-500-italic.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: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext-500-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/karla-latin-400-700.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: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/karla-latin-ext-400-700.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-surface: light-dark(#faf1e6, #190f14);
  --color-raised: light-dark(#fffaf3, #3d2332);
  --color-subtle: light-dark(#f3e6d6, #4b2f3f);
  --color-fg: light-dark(#2b2320, #f3e9dc);
  --color-fg-soft: light-dark(#4e413a, #ddcfbf);
  --color-muted: light-dark(#6b5b52, #cfbac5);
  --color-faint: light-dark(#7a6a60, #b6a1ac);
  --color-ghost: light-dark(#e3cfba, #5f4353);
  --color-line: light-dark(#e6d6c2, #4e3442);
  --color-line-strong: light-dark(#d3bfa8, #6d5160);
  --color-accent: light-dark(#5c6b3c, #c3a3cf); /* Oliva by day, Glicine at night: coral read as a warning on the near-black page */
  --color-accent-hover: light-dark(#4b5830, #d3b8dd);
  --color-accent-soft: light-dark(#ebcb8b, #694456); /* Ocra: categories, the current item; a light plum at night that stands off the cards */
  --color-on-accent-soft: light-dark(#5a3a1e, #f3e9dc); /* umber by day (green does not sit on ochre), cream at night */
  --color-chip: light-dark(#f3e6d6, #3f4430); /* tags: subtle by day, a muted olive at night, as quiet on the plum cards as on the black page */
  --color-chip-hover: light-dark(#e6d6c2, #4d5236); /* hover on tags: line by day, a lighter olive at night (a darker one sank into the page) */
  --color-chip-faint: light-dark(#7a6a60, #b8c48f); /* a tag's remove: faint by day, a pale olive on the olive chip at night */
  --color-chip-button-hover: light-dark(#f3e6d6, #4d5236);
  --color-on-accent: light-dark(#fff, #190f14);
  --color-danger: light-dark(#a33a2a, #f5788c);
  --color-danger-hover: light-dark(#87301f, #f99aaa);
  --color-danger-soft: light-dark(#fbeae4, #3a1216); /* a red apart from the plum cards, a touch darker */
  --color-danger-line: light-dark(#ebb9a9, #6e2a33);
  --color-on-danger: light-dark(#fff, #190f14);
  --color-success: light-dark(#5c6b3c, #c3a3cf); /* done = the accent */
  --color-success-soft: light-dark(#ebcb8b, #694456);
  --color-success-line: light-dark(#d4ae63, #8c6b7c);
  --color-on-success-soft: light-dark(#5a3a1e, #f3e9dc);
  --color-star: light-dark(#5c6b3c, #c3a3cf); /* stars are drawn in the accent */
  --color-check: light-dark(#5c6b3c, #c3a3cf); /* ticks in the accent */
  --color-step: light-dark(#d4694c, #aab97a); /* step numbers in coral, a deeper Corallo (3.2:1); olive at night */

  /* The menu bars (under the kitchen, and the phone's tab bar): a peach step
     towards the wall by day, so the band does not sit between two near-equal
     creams; at night the cards' aubergine. Peach rather than apricot keeps
     it apart from the Ocra highlight in the menus that open from it, and
     hover on the bar is a deeper peach. */
  --color-bar: light-dark(#f8d9c6, #3d2332);
  --color-bar-hover: light-dark(#f2c9b0, #4b2f3f);

  /* The majolica band under the header, quiet in either scheme: cream tiles
     with a soft ochre ink by day, near-black tiles with an aubergine ink at
     night (gold on the dark reads oriental, not Ligurian). */
  --color-band: light-dark(#f6eadb, #11080d);
  --color-band-ink: light-dark(#e2c08f, #462c3b);

  /* The kitchen in the header: the wall behind it (Albicocca by day, the
     moonlit night wall in the dark), and the wordmark's colours on it.
     At night the lamp and the stove light the wall; cream and a pale peach
     keep 4.5:1 even where it is brightest. */
  --color-art-ground: light-dark(#f4c7a1, #634e4c);
  --color-on-art: light-dark(#2b2320, #f3e9dc);
  --color-on-art-accent: light-dark(#9a4530, #ffcfb0);

  --font-display: Fraunces, Georgia, serif;
  --font-sans: Karla, system-ui, sans-serif;
  --display-weight: 500;
  --text-display: 34px;
  --text-section: 25px;
  --text-title: 20px;

  /* The wordmark sits on the wall above the stove: centred on the wide
     kitchen, between the lamp and the window on the narrow one, growing
     with the phone (22px at 390) yet keeping air with the widest dish. */
  --wordmark-x: 47%;
  --wordmark-y: 6%;
  --wordmark-x-wide: 50%;
  --wordmark-y-wide: 8%;
  --text-wordmark: clamp(20px, 5.6vw, 24px);
  --text-wordmark-wide: clamp(28px, 3.4vw, 42px);

  /* A louvred shutter before each page title, painted green by day and
     night like the kitchen's shutters. */
  --heading-mark-width: 0.42em;
  --heading-mark-gap: 0.32em;
  --heading-mark-color: light-dark(#5c6b3c, #3f4430); /* at night the tags' muted olive */

  /* Painted wood and tiles: barely rounded. */
  --radius-md: 3px;
  --radius-lg: 4px;

  --card-shadow: 0 1px 2px light-dark(rgb(76 48 30 / 0.06), rgb(0 0 0 / 0.3)),
    0 4px 14px light-dark(rgb(76 48 30 / 0.07), rgb(0 0 0 / 0.25));
  --float-shadow: 0 8px 28px light-dark(rgb(76 48 30 / 0.18), rgb(0 0 0 / 0.55));
}