/* The ordering page's tokens: the diner app's palette in a browser.
 *
 * LIFTED from mobile/src/theme.ts (palettes.light / palettes.dark), never
 * chosen — this is DESIGN.md's fifth surface, listed there so it cannot quietly
 * invent its own visual language. The names are theme.ts's own (ink, paper,
 * ctaFill, …) so a value can be checked against its source at a glance. Change
 * a value in theme.ts and carry it here in the same commit.
 *
 * Scoped to html.dd-app, the class boot.js sets once the page becomes the
 * ordering page: today's lander (assets/table.css) keeps its own light-only
 * look, untouched. Light by default, dark under prefers-color-scheme.
 *
 * The tints are theme.ts's alpha(token, a) written out, per palette, because
 * the token they are cut from differs between the two.
 */
html.dd-app {
  color-scheme: light;

  /* grounds and text */
  --ink: #ffffff;          /* the page */
  --ink2: #f4f4f0;         /* panel, band ground (neutral since 2026-10-11) */
  --card: #ffffff;
  --paper: #1d2616;        /* text */
  --paper-dim: #474f41;
  --muted: #4c5346;
  --line: rgba(29,38,22,0.12);   /* a divider, never a control's edge */
  --line-dash: #7d8578;          /* a control's own edge: a field, a checkbox */

  /* meaning (DESIGN.md § 1) */
  --accent: #4f7031;       /* press this */
  --on-accent: #ffffff;
  --chili: #a43b32;        /* errors and refusals */
  --green: #2f7d52;        /* settled */
  --green-ink: #276b45;    /* green TEXT on a green tint */
  --notice: #347ea1;       /* a fact */
  --notice-ink: #2a6785;   /* notice TEXT on a notice tint */
  --warn: #c0650f;         /* on hold, nothing lost (DESIGN.md § 1 warn) */
  --warn-ink: #8a4b08;     /* warn TEXT on the warn wash, 5.9:1 */
  --warn-wash: #faeee2;

  /* buttons (theme.ts, the block on ctaFill) */
  --cta-fill: #b0d097;     /* the primary plate, both palettes */
  --cta-edge: #6c9152;     /* rims SELECTION plates only; the primary has no rim */
  --on-cta: #2a4317;       /* the plate's own dark green, 6.44:1 */
  --btn2-fill: #ffffff;
  --btn2-text: #4f7031;
  --btn2-border: #4f7031;
  --lift: 0 1px 3px rgba(29,38,22,0.13);   /* buttons.ts lift(): light only */

  /* tints: alpha(token, a) */
  --accent-14: rgba(79,112,49,0.14);
  --chili-06: rgba(164,59,50,0.06);
  --chili-10: rgba(164,59,50,0.10);
  --chili-24: rgba(164,59,50,0.24);
  --chili-28: rgba(164,59,50,0.28);
  --danger-fill: rgba(164,59,50,0.10);     /* dangerBtn: 0.10 / 0.28 light */
  --danger-edge: rgba(164,59,50,0.28);
  --green-08: rgba(47,125,82,0.08);
  --notice-12: rgba(52,126,161,0.12);
  --paper-07: rgba(29,38,22,0.07);         /* a blocked primary */
  --backdrop: rgba(0,0,0,0.62);            /* sheet backdrop */

  /* faces: self-hosted (/assets/fonts/fonts.css), no third-party request */
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  html.dd-app {
    color-scheme: dark;

    --ink: #14110d;
    --ink2: #1b1712;
    --card: #221d16;
    --paper: #f3ead9;
    --paper-dim: #b9ad97;
    --muted: #b3a78f;
    --line: rgba(243,234,217,0.13);
    --line-dash: #787369;

    --accent: #b0d097;
    --on-accent: #14110d;
    --chili: #e8664a;
    --green: #4a9d5f;
    --green-ink: #65ac77;
    --notice: #86cff5;
    --notice-ink: #86cff5;
    --warn: #e58f45;
    --warn-ink: #f2b27a;
    --warn-wash: rgba(229,143,69,0.14);

    --cta-fill: #b0d097;
    --cta-edge: #b0d097;     /* on the dark ground the edge is the fill */
    --on-cta: #2a4317;
    --btn2-fill: #3d5329;
    --btn2-text: #eef4e6;
    --btn2-border: #3d5329;
    --lift: none;            /* dark needs none: #3d5329 separates on its own */

    --accent-14: rgba(176,208,151,0.14);
    --chili-06: rgba(232,102,74,0.06);
    --chili-10: rgba(232,102,74,0.10);
    --chili-24: rgba(232,102,74,0.24);
    --chili-28: rgba(232,102,74,0.28);
    --danger-fill: rgba(232,102,74,0.12);  /* dangerBtn: 0.12 / 0.30 dark */
    --danger-edge: rgba(232,102,74,0.30);
    --green-08: rgba(74,157,95,0.08);
    --notice-12: rgba(134,207,245,0.12);
    --paper-07: rgba(243,234,217,0.07);
    --backdrop: rgba(0,0,0,0.62);
  }
}