/*
  Design tokens: every colour, font, size, space, radius, shadow and icon the page uses, as custom properties. No other file
  may contain a colour value or a hard-coded size from this list (tests/test_web_static.py checks the colours;
  tests/test_web_contrast.py checks that every text/background pair below meets WCAG AA, in both themes).

  "Calm surface" (SPEC_redesign_calm_v1.md): a mineral-white page, white tiles with no border, one teal accent for what is
  chosen (picked waters, the selected recipe, links, the pour bar), and one espresso button for the main action. The page
  follows the device's light or dark setting until the visitor chooses with the button in the header: the dark blocks below
  redefine the same tokens (the polish pass, SPEC_polish_calm_v2.md, deepened the dark page and added the switch).
*/
:root {
  color-scheme: light;

  /* surfaces and text */
  --color-bg: #F1F4F3;                 /* the page */
  --color-card: #FFFFFF;               /* tiles and the result card */
  --color-surface: #E4EAE8;            /* the track of a segmented control, the fill of the language pill, hover */
  --color-text: #17252A;
  --color-text-muted: #55656A;
  --color-line: #E2E8E6;               /* hairlines inside a tile: decoration */
  --color-tile-border: transparent;    /* the hairline round a tile: only the dark theme draws it */
  --color-white: #FFFFFF;

  /* espresso for the one main button, teal for what is chosen */
  --color-primary: #4A2C1D;
  --color-primary-hover: #5E3A27;
  --color-on-primary: var(--color-white);
  --color-accent: #0F6B6B;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #E2F0EE;        /* the tip */

  /* the edge of a control, and the focus ring */
  --color-border-strong: #7D8C8F;
  --color-focus: #0054A3;

  /* the pour bar: water 1, 2, 3 (a fourth water and on repeat 2 and 3), and the % printed on each segment */
  --color-pour-1: #0F6B6B;
  --color-pour-2: #8CC5BD;
  --color-pour-3: #CFE7E3;
  --color-on-pour-1: #FFFFFF;
  --color-on-pour-2: #17252A;
  --color-on-pour-3: #17252A;

  /* the mixer's live sheet */
  --color-sheet: #17252A;
  --color-on-sheet: #FFFFFF;
  --color-on-sheet-muted: #B9C7C9;
  --color-sheet-tile: rgb(255 255 255 / 0.08);        /* the eight mineral tiles on the sheet (the same in both themes) */
  --color-on-sheet-warn: #F0C27A;                      /* the Cl tile's edge when chloride is above the advisory level */

  /* messages: "almost exact", "closest possible" and the chloride note, and errors */
  --color-success-bg: #E1EFDB;
  --color-success-text: #146B2F;
  --color-warn-bg: #FBF1DF;
  --color-warn-text: #8A5300;
  --color-error-bg: #F8E1DA;
  --color-error-text: #9B2226;

  /* the bar pinned to the bottom of a phone screen: the page's colour, a little see-through */
  --color-bar: color-mix(in srgb, var(--color-bg) 90%, transparent);

  /* type: IBM Plex Sans for Latin letters and digits, IBM Plex Sans Arabic for Arabic (both hosted in web/fonts/) */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", var(--font-system);
  --text-2xs: 0.75rem;                 /* 12 px at the default size (no text is smaller): step numbers, tile labels, table headers */
  --text-xs: 0.75rem;                  /* 12: pills, table headers, sheet labels, the language pill */
  --text-sm: 0.8125rem;                /* 13: captions, chips, tabs, the tip, the comparison heading */
  --text-body: 0.9375rem;              /* 15: running text, expander summaries, buttons */
  --text-base: 1rem;                   /* 16: inputs are never smaller (a phone zooms into a smaller box) */
  --text-md: 1rem;                     /* step titles */
  --text-lg: 1.0625rem;                /* the card title */
  --text-xl: 1.375rem;                 /* h1 on a phone */
  --text-2xl: 1.25rem;                 /* 20: the result card's pour amounts */
  --text-3xl: 1.75rem;                 /* 28: h1 on a wide screen */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.65;
  --leading-arabic: 1.75;              /* running text on the Arabic page: tall and deep letters read better a little looser */
  --leading-latin: 1.55;               /* running text on the English page */
  --leading-loose: 1.75;               /* the tip */

  /* space, shape, size, motion */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-section: 2rem;               /* between the page's sections */
  --space-inner: 0.875rem;             /* inside a section: its heading and its content */
  --radius-tile: 1rem;                 /* tiles */
  --radius-card: 1.375rem;             /* the result card */
  --radius-control: 0.75rem;           /* inputs, buttons, the pour bar */
  --radius-pill: 62.5rem;              /* chips, the language pill, segmented controls */
  --border-width: 1px;
  --rule-width: 2px;                   /* the selected recipe's border */
  --focus-width: 3px;
  --focus-offset: 2px;
  --control-height: 3rem;              /* inputs, selects, secondary buttons */
  --button-height: 3.25rem;            /* the primary button */
  --tap-min: 2.5rem;                   /* tabs, expander summaries: a comfortable touch target */
  --page-max: 46rem;
  --page-max-wide: 74rem;
  --page-gutter: 1rem;
  --aside-width: 27.5rem;              /* the desktop column with the button and the result */
  --shadow-tile: 0 1px 2px rgb(23 37 42 / 0.06);      /* only the checked option of a segmented control has one */
  --duration: 120ms;
  --duration-fade: 150ms;              /* a new result fades in */

  /* icons: drawn with a mask, so they take the colour of the text they sit in */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M5 8.3l2 2 4-4.4'/%3E%3C/svg%3E");
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.6v4M8 11.3h.01'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2l6.4 11.2H1.6z'/%3E%3Cpath d='M8 6.6v3M8 11.6h.01'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 9.6A5.6 5.6 0 0 1 6.4 2.5a5.6 5.6 0 1 0 7.1 7.1z'/%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 1.5v1.3M8 13.2v1.3M1.5 8h1.3M13.2 8h1.3M3.4 3.4l.9.9M11.7 11.7l.9.9M3.4 12.6l.9-.9M11.7 4.3l.9-.9'/%3E%3C/svg%3E");
  --icon-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8c2.3 3 4.3 5.2 4.3 7.5a4.3 4.3 0 0 1-8.6 0c0-2.3 2-4.5 4.3-7.5z'/%3E%3C/svg%3E");
}

/* The dark values, twice: for a visitor whose device is dark and who has not chosen (the media query, unless the page was told
   "light"), and for a visitor who chose dark with the button (data-theme on the html element). The two blocks are identical:
   tests/test_web_static.py keeps them so. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0B1214;
    --color-card: #18262A;
    --color-surface: #223338;
    --color-text: #E8EFEE;
    --color-text-muted: #A5B5B7;
    --color-line: #2B3D42;
    --color-tile-border: #2B3D42;

    --color-primary: #D3A27A;            /* a latte button with dark text (the espresso brown is too dark against the page) */
    --color-primary-hover: #DDB08C;
    --color-on-primary: #1C120B;
    --color-accent: #7FD3C7;
    --color-on-accent: #0B1214;
    --color-accent-soft: #163330;

    --color-border-strong: #6F8285;
    --color-focus: #7DB8FF;

    --color-pour-1: #7FD3C7;
    --color-pour-2: #3F8F86;
    --color-pour-3: #2A5E58;
    --color-on-pour-1: #0B1214;
    --color-on-pour-2: #0B1214;
    --color-on-pour-3: #FFFFFF;

    --color-sheet: #1F3035;
    --color-on-sheet: #E8EFEE;
    --color-on-sheet-muted: #A5B5B7;
    --color-on-sheet-warn: #F0C27A;

    --color-success-bg: #1A2E20;
    --color-success-text: #8FD19E;
    --color-warn-bg: #3A2E1C;
    --color-warn-text: #F0C27A;
    --color-error-bg: #3A1F1D;
    --color-error-text: #F2A9A4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0B1214;
  --color-card: #18262A;
  --color-surface: #223338;
  --color-text: #E8EFEE;
  --color-text-muted: #A5B5B7;
  --color-line: #2B3D42;
  --color-tile-border: #2B3D42;

  --color-primary: #D3A27A;            /* a latte button with dark text (the espresso brown is too dark against the page) */
  --color-primary-hover: #DDB08C;
  --color-on-primary: #1C120B;
  --color-accent: #7FD3C7;
  --color-on-accent: #0B1214;
  --color-accent-soft: #163330;

  --color-border-strong: #6F8285;
  --color-focus: #7DB8FF;

  --color-pour-1: #7FD3C7;
  --color-pour-2: #3F8F86;
  --color-pour-3: #2A5E58;
  --color-on-pour-1: #0B1214;
  --color-on-pour-2: #0B1214;
  --color-on-pour-3: #FFFFFF;

  --color-sheet: #1F3035;
  --color-on-sheet: #E8EFEE;
  --color-on-sheet-muted: #A5B5B7;
  --color-on-sheet-warn: #F0C27A;

  --color-success-bg: #1A2E20;
  --color-success-text: #8FD19E;
  --color-warn-bg: #3A2E1C;
  --color-warn-text: #F0C27A;
  --color-error-bg: #3A1F1D;
  --color-error-text: #F2A9A4;
}