/*
 * Design tokens. This is the ONLY file in the application that may contain a
 * colour literal — every template and component reads custom properties from
 * here (build-plan.yml conventions.styling).
 *
 * The values are the `terracotta_maize` candidate in pre_app/theme.yml. Nothing
 * here is signed off: when Alice answers N4/N5 the values in this file change
 * and nothing else does.
 *
 * Measured against the brand photograph in phase 12 (see theme.yml
 * palette_vs_photograph). Two things came out of that:
 *
 *   --brand-muted was #8a7364, which failed WCAG AA on the canvas at 4.10:1
 *     against the 4.5:1 it needs. It is the most-used secondary colour in the
 *     app — every "1 x Kilo", every counter name under a product — so it was a
 *     real defect, not a nicety. It is now #7e664e: 4.96:1 on the canvas,
 *     5.39:1 on white, and sitting at the photograph's own hue.
 *
 *   --brand-primary is at hue 12deg and NOTHING in the photograph is: the
 *     kiondo's leather runs 22-29deg and the wood 30-32deg. It is left alone on
 *     purpose. It holds the best contrast of the candidates (5.73:1) and the
 *     palette is Alice's to sign off (N5) — a proposed warmer value is recorded
 *     in theme.yml for her revision round rather than slipped in here.
 */

:root {
  color-scheme: light dark;

  /* ── Brand · theme.yml palette.candidates.terracotta_maize ─────────────── */
  --brand-primary: #a8442a;
  --brand-primary-dark: #7f3220;
  --brand-primary-light: #c4573a;
  --brand-accent: #e8b33a;
  --brand-support: #fbf5e9;
  --brand-ink: #2b1b14;
  --brand-muted: #7e664e;

  /* ── Semantic surfaces ─────────────────────────────────────────────────── */
  --color-canvas: var(--brand-support);
  --color-surface: #ffffff;
  --color-surface-sunken: #f4ece0;
  --color-border: #e3d5c1;
  --color-border-strong: #c9b49a;

  /* ── Semantic text ─────────────────────────────────────────────────────── */
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-muted);
  --color-text-inverse: #fffaf2;
  --color-link: var(--brand-primary);

  /* ── Semantic action ───────────────────────────────────────────────────── */
  --color-action: var(--brand-primary);
  --color-action-hover: var(--brand-primary-dark);
  --color-action-text: var(--color-text-inverse);
  --color-focus: var(--brand-accent);

  /* The attention colour: something the shop should look at now, but which is
     not an error. The new-order banner and a payment in flight both use it. */
  --color-accent: var(--brand-accent);
  --color-accent-ink: var(--brand-ink);

  /* ── Status ────────────────────────────────────────────────────────────── */
  --color-notice: #1f6b4a;
  --color-notice-bg: #e6f2ec;
  --color-alert: #a32116;
  --color-alert-bg: #fbeae8;
  --color-warning: #8a5a00;
  --color-warning-bg: #fdf3dd;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* ── Space ─────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ── Shape ─────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  /* Every shadow in the app is thrown by the SAME bulb — the one top-right in
     the photograph — so they all fall down-and-left, away from it. It was
     0 4px straight down, which is light from nowhere. This is the cheapest
     change in the phase and the one that does most to make the screens agree
     that they are the same room. */
  --shadow-card: 0 1px 2px rgb(43 27 20 / 8%), -3px 6px 16px rgb(43 27 20 / 10%);

  /* ── The room ──────────────────────────────────────────────────────────── */
  /* All that is left of the shelf planks: the lip under the till's topbar, so a
     till still reads as standing on the shop's counter. */
  --counter-edge: rgb(43 27 20 / 28%);

  /* A warm edge on the side of a card facing the bulb. Nothing in daylight —
     ambient light has no side — and the detail that sells one bulb at night. */
  --rim-light: rgb(255 255 255 / 0%);

  /* How much of the photograph is allowed through, and the veil that keeps text
     on the backdrop readable. The backdrop is a PICTURE; these two are what
     stop it competing with the words in front of it. */
  /*
   * The photograph is of a shop lit by ONE BULB after dark. Veiling it with
   * cream to make daylight does not work — it lifts the deep shelf shadows to
   * grey-green fog, which is what this looked like the first time. Screening a
   * warm amber into it instead lifts the same shadows to honey, which is what
   * daylight through a doorway actually does to wood. Tried both on the real
   * page; this is the one that reads as a lit shop rather than a foggy one.
   */
  --wood-opacity: 1;
  --room-veil: rgb(201 148 84 / 52%);
  --room-blend: screen, normal;

  /* Not a colour: a mask reads only the alpha channel, so this means "fully
     opaque" and nothing else. It is written here because tokens.css is the only
     file allowed to write a literal down, and the rule is worth more than the
     exception would be. Identical in both lights, for the same reason. */

  /* ── The plaques ───────────────────────────────────────────────────────── */
  /*
   * A card on the storefront is a wooden board with pale lettering cut into it.
   *
   * That is not a style choice, it is what the wood measured. Both boards are
   * dark: the lightest 5% of the day board sits at L 0.085 and of the night
   * board at L 0.070, which puts --color-text (#2b1b14) at about 1.2:1 on
   * either. Dark ink on a plaque is unreadable at any veil worth having, so the
   * type goes light — exactly as a real shop plaque is painted.
   *
   * A surface the app does not control needs its own text colours rather than
   * the page's. The hero photograph used to need the same thing; it is gone, and
   * a board is now the only surface in the app that brings its own colours.
   *
   * The veil differs between the lights because the two boards do. The day
   * board is a paler oak and needs 38% to bring its brightest grain down to
   * where the lettering holds; the night board is walnut and needs 12%.
   * spec/design/plaque_spec.rb re-measures the actual image files against these
   * values on every run.
   */
  --plaque-image: url("/assets/brand/plaque-day-480-2c8de9fb.webp");
  --plaque-veil: rgb(23 16 11 / 38%);

  --color-on-plaque: #f4e7d6;         /* 6.38:1 by day, 7.21:1 by night */
  --color-on-plaque-muted: #e6d4b8;   /* 5.35:1 by day, 6.05:1 by night */

  /* The link had to leave the terracotta family to survive a dark board:
     --color-link measures 2.96:1 on the day plaque. This is the same hue opened
     right up, and deliberately not the accent — the bulb is not a link. */
  --color-link-on-plaque: #f5c9a8;    /* 5.11:1 by day, 5.77:1 by night */

  /* A board has a bevel: lit along the top, in its own shadow along the bottom. */
  --plaque-edge-lit: rgb(255 226 186 / 18%);
  --plaque-edge-dark: rgb(0 0 0 / 50%);

  /* The socket a light switch sits pressed into. Darker than the board around
     it, deliberately: the selected position reads as pushed IN, and light
     lettering keeps working on it — --color-on-plaque is already measured
     against the board, and this is darker still. */
  --switch-socket: rgb(0 0 0 / 42%);

  /*
   * The lit edge of a raised tab, and it is much brighter than --relief-light
   * on purpose. --relief-light is the glow inside a carved groove, which is
   * light bouncing around in a shallow cut; this is a specular highlight off a
   * square edge turned toward the bulb, and those are bright.
   *
   * The edge is where a tab's contrast has to come from, because its FACE
   * cannot supply any. Measured: lightening the face by more than about 14% by
   * day drops --color-link-on-plaque from 5.12:1 to 4.34:1 and fails. A one
   * pixel edge never sits behind a glyph, so it costs nothing to make it sing.
   */
  --tab-bevel: rgb(255 238 210 / 46%);

  /*
   * The storefront's topbar has no bar behind it — the wall runs up behind the
   * shop's name. Which is the look, and on its own it is unreadable: measured on
   * the real page, the brightest wood behind the name reaches L 0.373 on a
   * desktop and L 0.573 on a phone, putting white at 2.26:1 and 1.53:1.
   *
   * So this is a scrim, and a scrim is readability rather than decoration. It is
   * a gradient that fades out below the bar, so the wood still reads through it
   * and there is no edge where a bar would be. The room's own ceiling is dark;
   * this is that shadow, made reliable.
   */
  --topbar-scrim: rgb(0 0 0 / 58%);

  /*
   * ── Etching ──────────────────────────────────────────────────────────────
   *
   * A number or an address carved into the board rather than printed on it: for
   * the small facts that inform and do not link.
   *
   * THE CARVING IS IN THE SHADOW, NOT IN THE COLOUR, and it has to be. Wood
   * carved and left bare is the same colour as the wood, which is unreadable —
   * measured, --color-on-plaque-muted against the day board is already only
   * 5.35:1 and anything genuinely wood-toned falls under 3:1. Real signwriting
   * solves it the same way: cut the groove, then paint it. So the letter keeps a
   * measured colour and the two shadows do the depth.
   *
   * The offsets follow the room's own light. The bulb is top-right, so the wall
   * of a groove that catches it is the lower-left one and the shadowed wall is
   * the upper-right — hence dark up-and-right, light down-and-left. The same
   * light that throws --shadow-card down-and-left.
   *
   * These two are named `relief` and not `etch` because they do BOTH jobs. A
   * letter carved into wood and a letter raised out of it are lit by the same
   * bulb and need the same two edges — the only difference is which side each
   * one falls on. Etching puts the shadow toward the light and the highlight
   * away from it; extrusion swaps them. That is the whole of it, and it is why
   * a link and a fact can be told apart by touch as well as by colour:
   *
   *   carved in  = it informs      (.etched)
   *   raised out = you can act     (a link on a board)
   */
  --color-etched: #e6d0aa;          /* 5.18:1 by day, 5.86:1 by night */
  --relief-shadow: rgb(0 0 0 / 55%);
  --relief-light: rgb(255 236 205 / 20%);

  /* ── Touch · §P5, the least confident staff member on a cheap phone ────── */
  --tap-target: 48px;
  --tap-target-lg: 64px;
  --content-max: 68rem;

  /* The staff menu as a column. layout.css names the width it stops being a
     column at (60rem); this is how much of the screen it takes when it is one,
     and how little is left when it is put away — the rail is the switch and the
     gap either side of it, and nothing else. */
  --menu-width: 15rem;
  --menu-rail: 2rem;
}

/*
 * ── Night ──────────────────────────────────────────────────────────────────
 *
 * The same room, not a second palette. In the photograph the shop is lit by one
 * bare tungsten bulb, and --color-accent IS that bulb — which is why the accent
 * is the one value below that does not change: a bulb does not change colour
 * when the daylight goes. What changes is that it becomes the ONLY source, so
 * the wood drops away into the corners and every surface is read by how much of
 * the bulb reaches it.
 *
 * Phase 12 deferred this ("nobody asked, the palette is unsigned, and a shop's
 * screen is read in daylight"). Two of those three still stand; the third does
 * not. The storefront is read on a customer's phone in daylight, but the TILL
 * is read at six in the morning before the shop is lit and at nine at night
 * under that bulb. Night mode's user is staff.
 *
 * Every value here was computed against the pairs in spec/design/palette_spec.rb
 * before it was written down, not chosen and checked afterwards. The one that
 * matters:
 *
 *   --color-link CANNOT be --brand-primary at night, and cannot be
 *     --brand-primary-light either. #a8442a on the night card measures 2.62:1
 *     and #c4573a measures 3.54:1 — both fail the 4.5:1 body text needs. A
 *     terracotta that survives as a BUTTON FILL (where the test is white text
 *     ON it, 5.73:1) does not survive as TEXT on wood. So the link steps to
 *     #e08a68 and decouples from the action colour, which the tokens have
 *     always kept as separate names anyway.
 *
 *   --color-action-hover moves TOWARD the light (#b34a2e, lighter than the
 *     resting #a8442a) rather than away from it. Hover meaning "darker" is a
 *     daylight habit; under one bulb, nearer the light is the thing that reads.
 *
 * THIS BLOCK EXISTS TWICE, on purpose: once for a device that asks for dark and
 * once for a shop that asked for night explicitly. CSS gives no way to share one
 * declaration block across a media query and a plain selector, so the copies are
 * kept honest by a spec that fails if they ever drift apart.
 */

/* The device asked. `:not([data-theme="day"])` so a shop that chose day keeps it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --brand-primary: #a8442a;
    --brand-primary-dark: #b34a2e;
    --brand-primary-light: #e08a68;
    --brand-accent: #e8b33a;
    --brand-support: #17100b;
    --brand-ink: #f4e7d6;
    --brand-muted: #b39a7e;

    --color-surface: #2e2118;
    --color-surface-sunken: #1f1610;
    --color-border: #3d2d20;
    --color-border-strong: #6b5540;

    --color-text-inverse: #fffaf2;
    --color-link: #e08a68;

    /* The bulb is a bright surface in either light, so what is written on it
       stays dark. It is var(--brand-ink) by day, and --brand-ink turns to bone
       at night — which would put bone on maize. Caught by palette_spec. */
    --color-accent-ink: #2b1b14;

    --color-notice: #7fd0a8;
    --color-notice-bg: #13251c;
    --color-alert: #f0938a;
    --color-alert-bg: #2e1512;
    --color-warning: #e0ab48;
    --color-warning-bg: #2a1e0c;

    --shadow-card: 0 2px 3px rgb(0 0 0 / 45%), -6px 10px 26px rgb(0 0 0 / 38%);
    --counter-edge: rgb(0 0 0 / 62%);
    --rim-light: rgb(255 206 138 / 16%);
    --wood-opacity: 0.5;
    --room-veil: rgb(23 16 11 / 62%);
    --room-blend: normal, normal;
    --plaque-image: url("/assets/brand/plaque-night-480-52d477f6.webp");
    --plaque-veil: rgb(23 16 11 / 12%);
    --plaque-edge-lit: rgb(255 214 150 / 26%);
    --topbar-scrim: rgb(0 0 0 / 34%);
    --relief-shadow: rgb(0 0 0 / 70%);
    --relief-light: rgb(255 226 178 / 16%);
    --switch-socket: rgb(0 0 0 / 55%);
    --tab-bevel: rgb(255 228 182 / 40%);
  }
}

/* The shop asked. */
:root[data-theme="night"] {
  --brand-primary: #a8442a;
  --brand-primary-dark: #b34a2e;
  --brand-primary-light: #e08a68;
  --brand-accent: #e8b33a;
  --brand-support: #17100b;
  --brand-ink: #f4e7d6;
  --brand-muted: #b39a7e;

  --color-surface: #2e2118;
  --color-surface-sunken: #1f1610;
  --color-border: #3d2d20;
  --color-border-strong: #6b5540;

  --color-text-inverse: #fffaf2;
  --color-link: #e08a68;

  /* The bulb is a bright surface in either light, so what is written on it
     stays dark. It is var(--brand-ink) by day, and --brand-ink turns to bone
     at night — which would put bone on maize. Caught by palette_spec. */
  --color-accent-ink: #2b1b14;

  --color-notice: #7fd0a8;
  --color-notice-bg: #13251c;
  --color-alert: #f0938a;
  --color-alert-bg: #2e1512;
  --color-warning: #e0ab48;
  --color-warning-bg: #2a1e0c;

  --shadow-card: 0 2px 3px rgb(0 0 0 / 45%), -6px 10px 26px rgb(0 0 0 / 38%);
  --counter-edge: rgb(0 0 0 / 62%);
  --rim-light: rgb(255 206 138 / 16%);
  --wood-opacity: 0.5;
  --room-veil: rgb(23 16 11 / 62%);
  --room-blend: normal, normal;
  --plaque-image: url("/assets/brand/plaque-night-480-52d477f6.webp");
  --plaque-veil: rgb(23 16 11 / 12%);
  --plaque-edge-lit: rgb(255 214 150 / 26%);
  --topbar-scrim: rgb(0 0 0 / 34%);
  --relief-shadow: rgb(0 0 0 / 70%);
  --relief-light: rgb(255 226 178 / 16%);
  --switch-socket: rgb(0 0 0 / 55%);
  --tab-bevel: rgb(255 228 182 / 40%);
}