/* Brand tokens for both sites.
 *
 * Source of truth: docs/mockups/vinomate-landing.html, vinomate-wine-page.html and
 * vino2vino-b2b.html. Wine (#5e1224) and gold (#b98d4f) are the spine -- they are the two
 * colours both sites share, and they are what makes a VinoMate page and a Vino2Vino page
 * read as one company.
 *
 * ## Four values here differ from the mockups, and all four are contrast fixes
 *
 * The mockups are design drafts and were never checked against WCAG. Measured (relative
 * luminance, sRGB), the following pairs fail AA for normal text, which is 4.5:1 --
 *
 *     --muted  #8a7f84 on cream #faf6ef ....... 3.58   used for the hero subtitle at 18px
 *     --muted  #7a7580 on paper #f4f2ee ....... 4.01   same role on the B2B page
 *     --gold   #b98d4f on white ............... 3.01   used for the 12px uppercase kickers
 *     #ffffff  on gold #b98d4f ................ 3.01   the announcement banner
 *
 * So the palette keeps the mockup's colours for decoration and adds darker siblings for
 * anything that carries words:
 *
 *     --muted-text  #6f656a on cream .......... 5.20
 *     --muted-text  #68646e on paper .......... 5.16
 *     --gold-text   #8f6529 on white .......... 5.17   (4.80 on cream, 4.62 on paper)
 *     banner text   --wine-deep on gold ....... 5.57   gold band kept, text darkened
 *
 * `tests/contrast.test.mjs` re-derives every one of these from this file and fails the build
 * if an edit drops a pair below its threshold. Change a colour and the test tells you.
 */

:root {
  /* ---- The spine: shared by both sites ---- */
  --wine: #5e1224;
  --wine-deep: #3d0a17;
  --gold: #b98d4f; /* decorative only -- rules, borders, band fills */
  --gold-text: #8f6529; /* anything gold that is a word */

  /* ---- Type ---- */
  --font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* ---- Spacing and shape ---- */
  --gutter: 7vw;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 18px rgb(42 33 38 / 7%);
  --shadow-raised: 0 12px 40px rgb(42 33 38 / 12%);
  --measure: 34em;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- The wine label ----
   *
   * Ted's standardised label from 2007, carried forward. The originals were four GIFs --
   * `app/htdocs/assets/images/{red,white,rose,unknown}_wine_label.gif`, 144x144, a rounded
   * square with a vertical gradient. These values are sampled from those files, so the
   * palette is his and not a reinterpretation of it.
   *
   * ONE colour moved, and only because it is unreadable. Measured against white text:
   *
   *     white  #4ECE12 / #3BAF04 ....... 2.07 / 2.87   FAIL (AA needs 4.5)
   *     red    #481296 / #2A065F ...... 11.65 / 16.28  ok
   *     rose   #AE2222 / #8A1212 ....... 6.88 /  9.65  ok
   *     unknown #3D3C3C / #1B1A1A ..... 10.99 / 15.32  ok
   *
   * The green keeps its hue (112) and saturation and loses lightness until it clears, which
   * is the smallest change that makes the label legible. Three of the four are untouched.
   *
   * Sparkling, Dessert and Fortified are NEW. The 2007 vocabulary was red/white/rose/unknown
   * and the catalogue has six types; without these, 90 wines in a 4,636 sample fall into
   * "unknown" alongside the 30% that genuinely have no type, which makes a real category
   * indistinguishable from missing data.
   */
  --label-red-top: #481296;
  --label-red-bottom: #2a065f;
  --label-white-top: #127802;
  --label-white-bottom: #0e5a02;
  --label-rose-top: #ae2222;
  --label-rose-bottom: #8a1212;
  --label-sparkling-top: #836407;
  --label-sparkling-bottom: #664e05;
  --label-dessert-top: #935106;
  --label-dessert-bottom: #764105;
  --label-fortified-top: #843615;
  --label-fortified-bottom: #692c11;
  --label-unknown-top: #3d3c3c;
  --label-unknown-bottom: #1b1a1a;

  /* Continent accent, 2007 values unchanged. Decorative only -- a 4px edge that never carries
   * words, which is why these are exempt from the contrast pairs. In 2007 they filled the
   * whole tile behind the wine colour; two colour systems on one surface read as a rendering
   * fault and doubled the vocabulary a reader had to learn. */
  --continent-af: #b34c3b;
  --continent-an: #45a7b3;
  --continent-as: #444eb3;
  --continent-ee: #b344ac;
  --continent-eu: #babb45;
  --continent-me: #235e28;
  --continent-na: #ffb960;
  --continent-sa: #5e471b;
}

/* ---- VinoMate: warm, serif, cream ---- */
[data-brand="vinomate"] {
  --bg: #faf6ef;
  --ink: #2a2126;
  --card: #ffffff;
  --muted: #8a7f84; /* decorative: rules, blurred chips, icon fills */
  --muted-text: #6f656a; /* AA on --bg */
  --body-on-card: #564b50;
  --sage: #7d8471;
  --hairline: #e8e0d4;
  --chip: #efe9e0;
  --footer-bg: #211318;
  --footer-ink: #c9b8be;
  --accent: var(--wine);
  --font-body: var(--font-serif);
  --font-display: var(--font-serif);
}

/* ---- Vino2Vino: cooler, sans body with serif display, paper ---- */
[data-brand="vino2vino"] {
  --bg: #f4f2ee;
  --ink: #1c1a22;
  --card: #ffffff;
  --muted: #7a7580;
  --muted-text: #68646e; /* AA on --bg */
  --body-on-card: #55505a;
  --slate: #3b3a45;
  --hairline: #e2ded7;
  --chip: #eae7e1;
  --footer-bg: #1c1a22;
  --footer-ink: #cfcad4;
  --accent: var(--wine);
  --font-body: var(--font-sans);
  --font-display: var(--font-serif);
}