/*
 * Look "Warm licht": warm ivory, tandoori red and gold, with Playfair Display headings. A light header with dark
 * text and a dark logo. The values of proposal A of the client mockup (docs/planning/11-ontwerpvoorstel-app.html).
 *
 * The complete set of variables of a look: every look file declares exactly these, in this order, and tests check
 * that they are all there and that the colours that are read together have enough contrast (WCAG 2.2 AA). What the
 * looks share (space, radius, motion, the font of the text) is in tokens.css.
 *
 * --header, --on-header, --primary, --on-primary and --bg are plain #rrggbb colours: the manifest, the theme-color,
 * the status bar of the web app and bin/build-app-icons read them (src/Service/Ui/DesignTokens.php). The app icons
 * are --on-primary on --primary, and --logo says which logo goes on the header: "white" for a dark header, "dark"
 * for a light one (assets/images/logo-white.png and logo-dark.png).
 */

@layer tokens {
  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/playfair-6oC5kJh.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    color-scheme: light;

    /* Type: the heading font (the font of the text is --font-body in tokens.css) */
    --font-display: 'Playfair Display', Georgia, serif;
    --display-style: normal;
    --display-weight: 700;

    /* Surfaces and text */
    --bg: #FBF6F0;
    --surface: #FFFFFF;
    --surface-2: #F3E8DD;
    --page: #EDE3D9; /* the footer of the website, and what shows behind the app */
    --text: #2C1810;
    --muted: #6E5446;
    --border: #E6D8CC;
    --border-strong: #957D6F;

    /* Actions. The app icons are --on-primary on --primary. */
    --primary: #B2361C;
    --on-primary: #FFFFFF;
    --primary-soft: #FBE7E0;

    /* Header: the top bar, the band behind the restaurant card, the status bar of the web app */
    --header: #FBF6F0;
    --on-header: #2C1810;
    --on-header-muted: #6E5446; /* the quiet text on the header: the account in the sidebar of the admin */
    --header-btn: #FFFFFF;
    --header-btn-shadow: 0 1px 2px rgba(44, 24, 16, 0.06), 0 2px 8px rgba(44, 24, 16, 0.06);
    --logo: dark; /* the logo on the menu: white or dark (assets/images/logo-white.png and logo-dark.png) */

    /* Focus ring, on the page and on the header */
    --focus: #B2361C;
    --focus-on-header: #2C1810;

    /* Accents: turmeric for loyalty and attention, green for vegetarian and open, red for spicy and errors */
    --gold: #C8963E;
    --gold-soft: #F6EAD3;
    --gold-text: #7A5512;
    --veg: #2F6B45;
    --veg-soft: #E3F0E7;
    --spice: #B42318;
    --spice-soft: #FDE8E4;
    --on-spice: #FFFFFF; /* the text on a red button: Weigeren, Annuleren and Terugbetalen of the admin */
    --closed: var(--gold-text);
    --closed-soft: var(--gold-soft);

    /* Depth */
    --scrim: rgba(28, 14, 10, 0.48);
    --shadow-1: 0 1px 2px rgba(44, 24, 16, 0.06), 0 2px 8px rgba(44, 24, 16, 0.06);
    --shadow-2: 0 -6px 24px rgba(44, 24, 16, 0.14);

    /*
     * Sign in with Apple and Google (docs/planning/15-push-native-design.md §2.2): the colours the two brands prescribe for their buttons. The
     * button of Apple is black on a light page, white on a dark one; the button of Google is white with a grey border on a light page, dark with a
     * light text and border on a dark one. The marks are the official files of the brands (assets/images/brands).
     */
    --apple-bg: #000000;
    --apple-fg: #FFFFFF;
    --google-bg: #FFFFFF;
    --google-fg: #1F1F1F;
    --google-border: #747775;

    /* The kitchen ticket (docs/planning/16-admin-design.md R20, A8): black on white in every look, for the printer at the counter. */
    --ticket-ink: #000000;
    --ticket-paper: #FFFFFF;

    /*
     * The lock screen of a phone in the preview of a message to the customers (docs/planning/16-admin-design.md A16): the same in every look, as a phone
     * shows it. The notification is the drawing's white at 58% over the screen, as a plain colour; its text is near black, the name of the app and "nu" grey.
     */
    --lock-screen: #26324F;
    --lock-note: #A4A9B5;
    --lock-ink: #111111;
    --lock-muted: #33363D;
  }
}