/* ===================================================================
 * THE BRAND FILE — edit this to restyle award.winehunter.it
 *
 * HOW TO USE IT
 *   1. Change a value below.
 *   2. Save.
 *   3. Refresh the site. That is the whole loop — no rebuild, no deploy,
 *      no restart. Give it up to ten seconds.
 *
 * On the server this file lives at:
 *   /opt/award-winehunter/apps/web/public/theme.css
 *
 * THE DESIGN IN ONE LINE
 *   Dark header and footer, light creamish page, dark gold product
 *   titles, near-black text for everything else.
 *
 * ⚠️ THE PAGE AND THE HEADER USE DIFFERENT VALUES ON PURPOSE.
 *   The header and footer stayed dark while the page went light, so they
 *   have their own `--chrome-*` values. Changing a page colour will not
 *   touch the header, and that is deliberate — before they were split,
 *   making the body text black turned the header into black-on-black.
 *
 * WHAT YOU CANNOT BREAK
 *   Layout. This file only redefines named values — it cannot move
 *   things, hide things, or take the site down. The worst a mistake here
 *   can do is look wrong, and undoing it is changing the value back.
 *
 * IF SOMETHING LOOKS BROKEN
 *   Delete the offending line entirely. Anything not listed here falls
 *   back to the built-in design automatically.
 *
 * COLOUR FORMATS — all of these work:
 *   #c9a35c              a hex colour
 *   rgb(201, 163, 92)    red, green, blue (0–255)
 *   rgba(201, 163, 92, 0.2)   the same, with 0.2 = 20% opaque
 * ================================================================ */

:root {
  /* -----------------------------------------------------------------
   * THE HEADER AND FOOTER (dark)
   *
   * ⚠️ These are the ONLY values that affect the dark bars. Nothing
   * here changes the page, and nothing in the page section below
   * changes these.
   * -------------------------------------------------------------- */

  /* The dark bar itself. */
  --chrome-bg: #16100f;

  /* The site name and brand text on it. */
  --chrome-text: #f5ebd6;

  /* Navigation links and footer small print. */
  --chrome-text-muted: #d6c8a6;

  /* The dimmest footer line. */
  --chrome-text-dim: #6b624e;

  /* Hairlines under the header and above the footer. */
  --chrome-border: rgba(201, 163, 92, 0.14);
  --chrome-border-strong: rgba(201, 163, 92, 0.45);

  /* ⚠️ The BRIGHT gold, for use on the dark bars only. The page gold
   * below is darker because it has to be readable on cream — using it
   * up here would make the links nearly vanish. */
  --chrome-gold: #c9a35c;
  --chrome-gold-bright: #e6c179;

  /* -----------------------------------------------------------------
   * THE PAGE (light and creamish)
   * -------------------------------------------------------------- */

  /* The cream behind everything. */
  --bg-base: #f6efe1;

  /* A slightly lighter cream, for raised panels. */
  --bg-elevated: #fdfaf3;

  /* Product rows and cards — the palest, so they lift off the page. */
  --bg-surface: #fffdf8;

  /* A row or card being hovered. */
  --bg-surface-2: #f1e8d5;

  /* -----------------------------------------------------------------
   * PAGE TEXT
   * -------------------------------------------------------------- */

  /* ⚠️ PRODUCT TITLES ONLY — the dark gold.
   *
   * Keep it DARK. A mid gold looks handsome in a mockup and becomes
   * unreadable on a real screen in daylight; this shade is chosen to
   * stay legible on the cream above. If you lighten it, check a product
   * page outdoors before keeping it. */
  --text-title: #7a5613;

  /* Everything else — obsidian rather than pure black. Pure #000 on
   * cream vibrates and reads harsher than the paper it imitates.
   * This is the colour of a line like "Liquore · 40% Alc". */
  --text-primary: #241f18;

  /* The grey second line under a product name. */
  --text-secondary: #3a332a;

  /* Labels, captions, small print. */
  --text-muted: #5d5446;

  /* The dimmest text on the page. */
  --text-dim: #7d7365;

  /* Text sitting ON a gold background — needs to stay dark. */
  --text-on-gold: #1a1009;

  /* -----------------------------------------------------------------
   * THE AWARD COLOURS
   *
   * ⚠️ These carry meaning, not just style. Each identifies an award
   * tier and visitors learn them. Adjust the shade freely; change the
   * hue with intent — a blue "gold" medal is not a restyle, it is wrong
   * information.
   *
   * ⚠️ They are darker than the medals themselves because they sit on
   * cream now. The artwork is unchanged.
   * -------------------------------------------------------------- */

  --accent-gold: #9a7526;
  --accent-gold-bright: #b8903a;
  --accent-gold-dim: #7a5c1c;
  --accent-platinum: #7c7c92;
  --accent-red: #8e1c21;
  --accent-red-bright: #a92a30;

  /* -----------------------------------------------------------------
   * BORDERS ON THE PAGE
   * Warm brown-gold rather than grey, so they read as part of the cream
   * rather than laid on top of it. The last number is opacity.
   * -------------------------------------------------------------- */

  --border-subtle: rgba(122, 90, 22, 0.16);
  --border-default: rgba(122, 90, 22, 0.3);
  --border-strong: rgba(122, 90, 22, 0.52);

  /* -----------------------------------------------------------------
   * FONTS
   *
   * List several, separated by commas. The browser uses the first one
   * it has, so always end with a generic (serif / sans-serif).
   *
   * ⚠️ A font only works if the visitor's device has it. Adding a name
   * here does NOT download it — that is a code change.
   * -------------------------------------------------------------- */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Garamond, Georgia, serif;

  /* -----------------------------------------------------------------
   * ROUNDNESS — 0 is square corners, larger is rounder.
   * -------------------------------------------------------------- */

  --radius-sm: 4px;   /* badges, small chips */
  --radius: 8px;      /* cards, buttons */
  --radius-lg: 14px;  /* large panels */

  /* -----------------------------------------------------------------
   * SPACING — the gaps between things.
   *
   * ⚠️ A 4-pixel ladder used everywhere. Changing one changes the gap
   * in many places at once, so move in small steps and look at a
   * product page afterwards. Leaving these alone is usually right.
   * -------------------------------------------------------------- */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
}