/*
 * Design tokens that are the same in every look: the space, radius, touch target and motion of the app, the measures
 * of the layout and the font of the text and the controls (the font of the device, so there is no font file to
 * download). This file comes first on every page and declares the order of the cascade layers.
 *
 * Everything that makes a look (the colours, the header, the focus ring, the shadows, the heading font and which
 * logo) is in the file of that look, assets/styles/looks/<name>.css. APP_LOOK in the environment says which look the
 * app wears (lasanie, bruin, warm or espresso) and the layout links only that file. The other stylesheets use these
 * variables and no colour or font of their own (a test fails on one), so a look is a file and nothing else.
 *
 * To add a look: copy looks/warm.css, change the values and the heading font, add a case to src/Enum/Look.php, run
 * bin/build-app-icons and commit the icons it makes. The tests pick the new look up by themselves (the complete set
 * of variables, contrast, icons, fonts). ADR-027 has the whole recipe.
 */

/* The order of the layers, from the weakest to the strongest. Every stylesheet puts its rules in one of them. */
@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /*
     * The font of the text and of the controls: the font of the device (San Francisco on iPhone and Mac, Roboto on
     * Android, Segoe UI on Windows), as the apps of the phone use. Only the headings have a brand font, and that
     * is part of the look.
     */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';

    /* Space (4/8 scale), radius, touch target, motion */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;
    --tap: 44px;
    --dur-fast: 120ms;
    --dur: 200ms;

    /* Layout: the bars and the columns of the adaptive frame (see layout.css) */
    --topbar-h: 60px;
    --chips-h: 53px;
    --tabbar-h: 61px; /* the tab bar: 6px + a tab of 48px + 6px + a 1px border, without the safe area under it */
    --bottom-bars: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); /* what is at the bottom of the screen that the cart bar and the foot of the cart stick above: the tab bar (not on a tablet or a desktop) */
    --panel-room: none; /* how high the box of the cart panel may be; layout.css sets it where the panel is shown, to the screen below the header */
    --cartbar-h: 68px; /* the cart bar with the room under it, 56px + 12px: what the foot of the page of a dish sticks above while there is a bar */
    --toast-room: calc(max(var(--tap), 2.8125rem) + var(--s-2) * 3); /* what the dock keeps for a message above the cart bar: two lines of its text (or the 44px of its undo button), its padding and the gap under it */
    --toast-band: 0px; /* the room of a message that the keyboard focus scrolls clear of: --toast-room while one is up (base.css), nothing otherwise */
    --toast-end: 0px; /* the room that the end of the cart page keeps for the message floating above its foot, so that the last control can be scrolled out from under it: the height of the box of the messages (the message and the gap under it), --toast-room until toast_controller.js has measured it (base.css), kept for the rest of the page view once a message has come (so that nothing moves when it times out), nothing before the first message and on the next page */
    --adm-order-bars: 3.5rem; /* the admin (order.css): the room that the middle of the detail of an order keeps under its last line while a bar of the order is shown (review 4), the height of the place of its bars as admin_undo_controller.js measures it; one bar until then */
    --adm-board-bars: 3.5rem; /* the same for the board and the messages of its quick switches */
    --cart-foot-h: 77px; /* the foot of the cart page, and of the page of a dish, at the normal text size: 12px + the 52px button + 12px + a 1px border; the messages float above it. cart_foot_controller.js writes the measured height here (at large text on a phone the button wraps and the foot is taller) */
    --tabs-h: 61px; /* the tabs under the title bar of the tablet in portrait: 6px + 2px + a tab of 44px + 2px + 6px + a 1px border */
    --header-row-h: 72px; /* one row of the header of the website; the logo block of the sidebar is as high */
    --header-h: var(--header-row-h); /* how high the header of the website is, which the sticky offsets use; a script sets it to the measured height when large text makes the header take more than a row */
    --sidebar-w: 260px; /* the sidebar of the tablet in landscape */
    --categories-w: 240px; /* the list of categories next to the menu on the desktop */
    --panel-w: 320px; /* the cart panel next to the menu */
    --narrow: 640px; /* a page that is a centred column: forms, text, the dish, the account */
    --frame-max: 1600px; /* the widest the website gets; a screen that is wider has margins */
    /* The bars that stay on top of the content while it scrolls; layout.css sets it for each size class. */
    --chrome-h: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
}