/* css/tokens.css
   The one file of the look (Greg, 27.10.2026: "si un jour on doit changer
   la couleur de fond ou la police d'ecriture, que ca se fasse simplement et
   dans un seul fichier"). Every colour, font, text size, spacing, radius,
   shadow and duration of the site is defined here and only here; the other
   sheets write var(--cs-...). tools/check-css-tokens.mjs holds every sheet
   written in layers to it.

   The order of the cascade is declared once, below: a rule of a higher
   layer wins over a lower one whatever its selector, so no sheet needs
   !important nor :not(#cs-none) (Greg, 27.10.2026: "je crois que je
   deviens allergique a !important").
     tokens       this file
     base         the page itself: the ground, the text, the links, focus
     composants   the shared pieces: bar, tabs, menu, rows, fields,
                  switches, chips, buttons, side panel, confirmations,
                  toasts, save bar, banner
     pages        what one page or one zone has of its own
     utilitaires  the few one-purpose classes (hidden, visually hidden)
   A sheet outside every layer would win over all of them: the rewritten
   pages load no such sheet.

   The values are the console's (css/console.css, Greg 18.10 and
   25.10.2026: "graphite doux" at night, "porcelaine" by day, metallic gold
   lines, Atkinson Hyperlegible Next), carried over as they are so that a
   rewritten page looks the same. The names keep the console's "cs-"
   prefix. Until lot R8, css/console.css still defines the same values for
   the pages not yet rewritten. */

@layer tokens, base, composants, pages, utilitaires;

/* ---- Faces, served by the site (no third-party font: the privacy text
   names no such transfer) ---- */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-Medium.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-SemiBold.woff2) format("woff2"); }
/* The logo's face (Pepper Type, bought for RESTO ONE): the written brand
   only. */
@font-face { font-family: "Alethia Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/AlethiaNext-Regular.otf) format("opentype"); }
/* The icons, drawn by ligature (the text "undo" draws the arrow): every
   icon span carries aria-hidden="true", or its word is read with the
   button's name. */
@font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/md/material-symbols-rounded.woff2) format("woff2"); }

@layer tokens {
  /* ---- Night, the default (no data-theme). A screen that stays at night
     whatever the theme (Greg,
     01.10.2026, for the tablet's lock screen; the sign-in pages follow
     the theme since the one style of 25.10.2026): such a screen carries
     data-nuit on <html>. ---- */
  :root {
    /* Grounds, from the back to the front */
    --cs-ground: #222120; --cs-ground-solid: #222120;
    --cs-bar: #282725;
    --cs-bg: #252422;
    --cs-panel: #2d2c2a; --cs-panel-2: #383633; --cs-sel: #383633;
    /* Lines: a metallic gold, a true hairline on a 2x screen */
    --cs-line: rgba(246, 200, 92, .36); --cs-line-2: rgba(246, 200, 92, .5);
    --cs-line-grad: linear-gradient(100deg, rgba(143, 106, 40, .62) 0%, rgba(247, 220, 142, .62) 22%, rgba(201, 154, 62, .62) 45%, rgba(255, 231, 163, .62) 68%, rgba(143, 106, 40, .62) 100%);
    --cs-lw: 1px; --cs-lwn: 1;
    /* The solid gold: active tab, gauge, switch, Enregistrer */
    --cs-sheen: linear-gradient(135deg, #ffe7a3 0%, #f0c35a 38%, #c99a3e 72%, #987331 100%);
    --cs-gold: #d7b56b; --cs-gold-ink: #1f1b16;
    /* The solid gold of a control that fills (the slider's track, handle
       and bubble) and the ink on it. */
    --cs-gold-solid: #d7b56b; --cs-gold-solid-ink: #2b1f08;
    /* Text, from the most to the least read */
    --cs-fg: #e4e1dc; --cs-fg-2: #bdb9b2; --cs-fg-3: #9a968f;
    /* States */
    --cs-ok: #5fbf8a; --cs-ok-bg: #173226;
    --cs-warn: #e5a94a; --cs-warn-bg: #3a2c12;
    --cs-crit: #ef6b62; --cs-crit-bg: #3d1a18;
    --cs-info: #7aa7d9; --cs-info-bg: #182a3d;
    /* "Look here": a value unlike the others, a field just reached, a
       season that closes a room (an orange, not an alarm). */
    --cs-attn: #ffb74d; --cs-attn-bg: rgba(255, 152, 0, .15); --cs-attn-line: rgba(255, 152, 0, .3);
    /* A guest who did not come (the history's "Non venu"): a quiet brown. */
    --cs-blocked: #d2c5b4; --cs-blocked-bg: #39342e;
    /* Veils and shadows */
    --cs-scrim: rgba(0, 0, 0, .35); --cs-scrim-2: rgba(0, 0, 0, .55);
    /* Behind the platform's menu on a phone (css/plateforme.css). */
    --cs-scrim-menu: rgba(0, 0, 0, .45);
    /* The lunch in the platform's report (the dinner is the gold). */
    --cs-lunch: #b3cea8;
    /* The platform console's scrollbars: 8 px, a gold thumb. */
    --cs-scroll-thumb: rgba(212, 178, 78, .25); --cs-scroll-thumb-hover: rgba(212, 178, 78, .45); --cs-scroll-track: rgba(0, 0, 0, .2);
    --cs-shadow: rgba(0, 0, 0, .25);
    --cs-shadow-soft: rgba(0, 0, 0, .14);
    /* A menu, a list open: two soft shadows (Material's level 2, kept). */
    --cs-elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --cs-elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --cs-elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
    /* The tooltips, on the inverse surface. */
    --cs-tip-bg: #ebe1d9; --cs-tip-fg: #353029;
    --cs-shadow-deep: rgba(0, 0, 0, .35);
    --cs-scheme: dark;

    /* The night of the brand (01.10.2026): the splash over the sign-in
       pages, near-black with a gold glow, a brushed texture and a gold
       rule; the logo's gold for the die and the name. */
    --cs-night: #0c0b09; --cs-night-edge: #060606;
    --cs-night-glow: rgba(214, 171, 82, .085);
    --cs-night-brush: rgba(255, 255, 255, .011);
    --cs-night-rule: rgba(214, 171, 82, .62);
    --cs-night-texture: repeating-linear-gradient(0deg, var(--cs-night-brush) 0 1px, transparent 1px 3px);
    --cs-night-vignette: radial-gradient(ellipse 125% 105% at 50% 45%, var(--cs-night) 45%, var(--cs-night-edge) 100%);
    --cs-night-rule-line: linear-gradient(90deg, transparent, var(--cs-night-rule), transparent);
    --cs-logo-gold-hi: #f4d996; --cs-logo-gold-mid: #e0b863; --cs-logo-gold-lo: #c79a45; --cs-logo-gold-deep: #987331;
    --cs-logo-glint: rgba(255, 247, 226, .75);
    --cs-logo-gold: #d4b24e;

    /* The bug-report tab (Greg, 17.10.2026): coral, its ink near-black. */
    --cs-languette: #e57373; --cs-languette-ink: #1e2124;

    /* A QR code: dark on white in both themes, so that any camera reads it. */
    --cs-qr-bg: #ffffff; --cs-qr-ink: #1f1b16;
    /* The plate under the restaurant's logo in the bar, when the logo would
       vanish on it (js/logo-tone.js): dark under a light logo, white under
       a dark one. */
    --cs-logo-plate-dark: #2f2a24; --cs-logo-plate-light: #ffffff;

    /* The restaurant's page as its guests see it, the same in both themes:
       its default colour, the white of its preview, the three templates
       drawn small (a paper, a photo, an ink) and the veils over a photo. */
    --cs-site-accent: #9a3412; --cs-site-paper: #ffffff;
    --cs-tpl-classic-paper: #faf7f2; --cs-tpl-classic-photo: linear-gradient(135deg, #8a7a66, #4a4036);
    --cs-tpl-modern-paper: #ffffff; --cs-tpl-modern-photo: linear-gradient(135deg, #7d8794, #3c4450); --cs-tpl-modern-ink: #111418;
    --cs-tpl-bistro-paper: #f3ebdd; --cs-tpl-bistro-photo: linear-gradient(135deg, #a88b6a, #6f5a45); --cs-tpl-bistro-ink: #2a241c;
    --cs-tpl-bistro-board: #23211d; --cs-tpl-bistro-wood: #6f5a45;
    --cs-photo-ink: #ffffff; --cs-photo-veil: rgba(0, 0, 0, .65); --cs-photo-fade: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
    --cs-swatch-ring: rgba(255, 255, 255, .2);

    /* The three plans, each its colour, a tint and a line (the plan's pill
       wherever a page names it). */
    --cs-plan-bistro: #8fb3cc; --cs-plan-bistro-tint: rgba(143, 179, 204, .14); --cs-plan-bistro-line: rgba(143, 179, 204, .38);
    --cs-plan-resto: #5fb8b0; --cs-plan-resto-tint: rgba(95, 184, 176, .14); --cs-plan-resto-line: rgba(95, 184, 176, .38);
    --cs-plan-gastro: #d4b24e; --cs-plan-gastro-tint: rgba(212, 178, 78, .16); --cs-plan-gastro-line: rgba(212, 178, 78, .45);

    /* ---- The week: open (green), service (blue), kitchen (amber), the
       last booking (red). The sheet's read-only grid (js/week-grid.js,
       css/semaine.css) and the questionnaire's editors (css/questionnaire.css,
       its own palette since the mock-ups of 02.10.2026). ---- */
    --cs-wk-open-fill: rgba(45, 130, 55, .35); --cs-wk-open-edge: rgba(70, 170, 80, .55); --cs-wk-open-ink: rgb(100, 220, 110);
    --cs-wk-open-swatch: rgba(45, 130, 55, .45); --cs-wk-open-swatch-edge: rgba(70, 170, 80, .6);
    --cs-wk-svc-fill: rgba(50, 100, 210, .45); --cs-wk-svc-edge: rgba(80, 140, 240, .55); --cs-wk-svc-ink: rgb(180, 210, 255);
    --cs-wk-kit-fill: linear-gradient(180deg, rgba(220, 160, 50, .3), rgba(180, 120, 30, .2)); --cs-wk-kit-edge: rgba(220, 160, 50, .5);
    --cs-wk-kit-glow: rgba(220, 160, 50, .1); --cs-wk-kit-ink: rgb(230, 180, 60);
    --cs-wk-kit-swatch: rgba(220, 160, 50, .4); --cs-wk-kit-swatch-edge: rgba(220, 160, 50, .6);
    --cs-wk-zone-edge: rgba(100, 200, 255, .85); --cs-wk-zone-glow: rgba(100, 200, 255, .25);
    --cs-wk-lr-glow: rgba(220, 80, 80, .5); --cs-wk-lr-ink: #e55; --cs-wk-lr-swatch: rgba(220, 80, 80, .7);
    --cs-wk-closed: #e57373;
    --cs-wk-warn-edge: rgba(255, 80, 80, .85);
    --cs-wk-warn-glow: rgba(255, 60, 60, .4); --cs-wk-warn-glow-in: rgba(255, 60, 60, .15);
    --cs-wk-warn-glow-hi: rgba(255, 60, 60, .7); --cs-wk-warn-glow-in-hi: rgba(255, 60, 60, .25);
    --cs-wk-ink-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    --cs-wk-quarter: rgba(255, 255, 255, .015); --cs-wk-half: rgba(255, 255, 255, .03);
    --cs-wk-hatch: rgba(255, 255, 255, .04); --cs-wk-closed-hatch: rgba(255, 255, 255, .02);
    --cs-ob-open: #7fd6a0; --cs-ob-open-c: #1e5236; --cs-ob-open-wash: rgba(127, 214, 160, .1); --cs-ob-opencont-pale: #568b68;
    --cs-ob-service: #99cbff; --cs-ob-service-c: #004a77; --cs-ob-service-wash: rgba(153, 203, 255, .1); --cs-ob-cont-pale: #6684a3;
    --cs-ob-kitchen: #f2b84b; --cs-ob-kitchen-bg: rgba(242, 184, 75, .26); --cs-ob-kitchen-ink: #f2b84b; --cs-ob-kitchen-wash: rgba(242, 184, 75, .1);
    --cs-ob-lastres: #d9534a; --cs-ob-lastres-glow: rgba(217, 83, 74, .4); --cs-ob-closed-pale: #b3584f;
    --cs-ob-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    --cs-ob-strip-shadow: 0 10px 14px -12px rgba(0, 0, 0, .9);

    /* A mask that keeps everything: with a content-box copy, a frame of the
       padding's width (the gold frames of the questionnaire's cards). */
    --cs-mask-fill: linear-gradient(#000 0 0);
    /* A disabled button of the questionnaire: a grey wash under its .38. */
    --cs-disabled-wash: rgba(128, 128, 128, .12);

    /* ---- Fonts ---- */
    --cs-sans: "Atkinson Hyperlegible Next", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    /* The values: the same face with tabular figures (Greg 25.10.2026: not
       the monospace look); a monospace face may come behind this name. */
    --cs-mono: "Atkinson Hyperlegible Next", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --cs-brand: "Alethia Next", "Atkinson Hyperlegible Next", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --cs-icons: "Material Symbols Rounded";

    /* ---- Text sizes: the steps the pages use (measured 27.10.2026). In
       the console, 13 the running text and the tabs, 12 a second line, 11
       an uppercase label, 14 a section's title, 20 a page's title, 22 a
       figure; on the sign-in pages 22 the title, 15 the button. A size met
       on one element only stays written where it is. ---- */
    --cs-fs-xs: 11px; --cs-fs-sm: 12px; --cs-fs-md: 13px; --cs-fs-lg: 14px;
    --cs-fs-xl: 15px; --cs-fs-2xl: 20px; --cs-fs-3xl: 22px;
    --cs-lh: 1.45; --cs-lh-title: 1.3;

    /* ---- Spacing: the steps the console uses ---- */
    --cs-sp-1: 2px; --cs-sp-2: 4px; --cs-sp-3: 6px; --cs-sp-4: 8px; --cs-sp-5: 10px;
    --cs-sp-6: 12px; --cs-sp-7: 14px; --cs-sp-8: 16px; --cs-sp-9: 20px; --cs-sp-10: 24px;

    /* ---- Radii ---- */
    --cs-r-s: 3px; --cs-r-m: 4px; --cs-r-l: 6px; --cs-r-xl: 12px; --cs-r-pill: 999px;

    /* ---- Motion ---- */
    --cs-dur: .15s;

    /* ---- The two sizes (Greg, 27.10.2026): "Souris" here, "Doigt" below.
       --cs-target is what a tap or a click reaches, 48 px in both (the touch
       area Material gave stays; 26.10.2026 the switches drawn at 32 px had
       lost it); --cs-control is the height a button or a field is drawn.
       The other "Doigt" values (text, rows, gaps) are set with lot R6,
       tried by Greg on a real tablet. ---- */
    --cs-target: 48px;
    --cs-control: 32px;
  }

  @media (min-resolution: 2dppx) { :root { --cs-lw: .5px; --cs-lwn: .5; } }

  /* ---- Day, "porcelaine" ---- */
  :root[data-theme="ivory"]:not([data-nuit]) {
    --cs-ground: radial-gradient(700px 380px at 20% 0%, #ffffff, transparent 65%), linear-gradient(180deg, #fdfcfa, #f6f4f0); --cs-ground-solid: #f6f4f0;
    --cs-bar: #ffffff;
    --cs-bg: #fffdfb;
    --cs-panel: #ffffff; --cs-panel-2: #f1ece3; --cs-sel: #f1ece3;
    --cs-line: rgba(196, 146, 24, .42); --cs-line-2: rgba(196, 146, 24, .55);
    --cs-line-grad: linear-gradient(100deg, rgba(184, 135, 42, .62) 0%, rgba(240, 207, 115, .62) 22%, rgba(201, 154, 46, .62) 45%, rgba(246, 220, 140, .62) 68%, rgba(167, 122, 32, .62) 100%);
    --cs-sheen: linear-gradient(135deg, #f0cf73 0%, #d4a537 40%, #a77a20 100%);
    --cs-gold: #8a6620; --cs-gold-ink: #1f1b16;
    --cs-gold-solid: #7c5800; --cs-gold-solid-ink: #ffffff;
    --cs-fg: #1f1b16; --cs-fg-2: #4e4539; --cs-fg-3: #776d5f;
    --cs-ok: #1f8a52; --cs-ok-bg: #e3f4ea;
    --cs-warn: #9a6200; --cs-warn-bg: #fdf1dc;
    --cs-crit: #c0362c; --cs-crit-bg: #fde6e4;
    --cs-info: #2f6aa8; --cs-info-bg: #e5eef8;
    --cs-attn: #c47a00; --cs-attn-bg: rgba(230, 126, 0, .12); --cs-attn-line: rgba(230, 126, 0, .25);
    --cs-blocked: #4e4539; --cs-blocked-bg: #e9e1d8;
    --cs-tip-bg: #353029; --cs-tip-fg: #f8efe7;
    --cs-scheme: light;
    --cs-lunch: #4d6544;
    --cs-scroll-thumb: rgba(160, 130, 45, .4); --cs-scroll-thumb-hover: rgba(160, 130, 45, .6); --cs-scroll-track: rgba(232, 227, 214, .5);
    --cs-wk-open-ink: rgb(30, 100, 40); --cs-wk-svc-ink: rgb(30, 60, 150); --cs-wk-kit-ink: rgb(160, 100, 10);
    --cs-wk-zone-edge: rgba(30, 120, 200, .5); --cs-wk-lr-ink: #c33; --cs-wk-closed: #c04040;
    --cs-wk-ink-shadow: 0 1px 2px rgba(255, 255, 255, .7);
    --cs-wk-quarter: rgba(0, 0, 0, .015); --cs-wk-half: rgba(0, 0, 0, .03); --cs-wk-hatch: rgba(0, 0, 0, .04);
    --cs-ob-open: #1b6c43; --cs-ob-open-c: #b1f1c7; --cs-ob-open-wash: rgba(27, 108, 67, .12); --cs-ob-opencont-pale: #4d8b6a;
    --cs-ob-service: #00629e; --cs-ob-service-c: #cfe5ff; --cs-ob-service-wash: rgba(0, 98, 158, .11); --cs-ob-cont-pale: #3d86b2;
    --cs-ob-kitchen: #9a6200; --cs-ob-kitchen-bg: rgba(154, 98, 0, .16); --cs-ob-kitchen-ink: #7a4d00; --cs-ob-kitchen-wash: rgba(154, 98, 0, .12);
    --cs-ob-lastres: #a8231d; --cs-ob-lastres-glow: rgba(168, 35, 29, .28); --cs-ob-closed-pale: #c9564f;
    --cs-ob-shadow: 0 1px 2px rgba(255, 255, 255, .7);
    --cs-ob-strip-shadow: 0 10px 14px -12px rgba(80, 60, 20, .35);
    --cs-plan-bistro: #3d6a8c; --cs-plan-bistro-tint: rgba(61, 106, 140, .12); --cs-plan-bistro-line: rgba(61, 106, 140, .35);
    --cs-plan-resto: #1f7d75; --cs-plan-resto-tint: rgba(31, 125, 117, .12); --cs-plan-resto-line: rgba(31, 125, 117, .35);
    --cs-plan-gastro: #7a6520; --cs-plan-gastro-tint: rgba(160, 130, 45, .16); --cs-plan-gastro-line: rgba(160, 130, 45, .45);
  }

  /* ---- "Doigt": automatic on a touch screen without a mouse, or chosen
     for the device in Appareils (data-taille on <html>, lot R6) ---- */
  @media (pointer: coarse) and (hover: none) { :root:not([data-taille="souris"]) { --cs-control: 48px; } }
  :root[data-taille="doigt"] { --cs-control: 48px; }

  /* ---- The public pages (widget, booking, the restaurant's site) wear the
     restaurant's colours and face (Greg, 27.10.2026): its script sets these
     same variables on <html>, from the restaurant's choices. ---- */
}