/*
 * pre.red design tokens: the only place colours, fonts, radii and shadows are defined.
 * Source: Claude Design canvas, page "Final entry" (docs/DESIGN.md).
 *
 * Themes: Paper (light) and Ink (dark). Every colour is light-dark(Paper, Ink); the theme is chosen
 * with color-scheme: System follows the device, data-theme="light" or "dark" on <html> forces one.
 * Accents: data-accent="seal" (default), "harbor", "garden" or "plum" on <html>. Ink lifts the
 * accent automatically.
 */

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url("../fonts/instrument-serif-400.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;
}

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: optional;
    src: url("../fonts/instrument-serif-400-italic.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;
}

@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url("../fonts/inter-tight-var.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;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: optional;
    src: url("../fonts/jetbrains-mono-var.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 dark;

    /* Type */
    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Shape */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Accent (the base; see the derived tokens below) */
    --accent-base: #C8341F;

    /* Surfaces and text */
    --bg: light-dark(#F7F5F0, #121110);
    --surface: light-dark(#FFFFFF, #1B1A18);
    --surface-2: light-dark(#F1EEE7, #161513);
    --surface-3: light-dark(#E8E3D9, #26241F);
    --line: light-dark(#E4DFD5, #2D2A25);
    --line-2: light-dark(#EFEBE4, #23211D);
    --ink: light-dark(#1B1A17, #F3EFE7);
    --ink-2: light-dark(#3B3934, #D9D3C7);
    --muted: light-dark(#6A665E, #A49E92);
    --faint: light-dark(#A9A397, #6E685E);
    --frame: light-dark(#D3CDC1, #34312B);
    --knob: #FFFFFF;
    /* QR codes stay dark on white in both themes: scanners need the contrast. */
    --qr-light: #FFFFFF;
    --qr-dark: #1B1A17;
    --knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

    /* Accent, derived */
    --accent: light-dark(var(--accent-base), color-mix(in srgb, var(--accent-base) 72%, #FFFFFF));
    --accent-ink: light-dark(#FFFFFF, #1B1A18);
    --accent-text: light-dark(color-mix(in srgb, var(--accent) 82%, #000000), color-mix(in srgb, var(--accent) 86%, #FFFFFF));
    --accent-soft: light-dark(color-mix(in srgb, var(--accent) 10%, #FFFFFF), color-mix(in srgb, var(--accent) 15%, #1B1A18));

    /* States */
    --good: light-dark(#2F6B3F, #86C795);
    --good-soft: light-dark(#E4EFE6, #1D2A20);
    --warn: light-dark(#8F5400, #F2B54A);
    --warn-soft: light-dark(#FFF1D4, #2E2515);
    --info: light-dark(#2F5DB0, #8DB2F2);
    --info-soft: light-dark(#E7EEF9, #1C2433);

    /* Meaning colours */
    --food: light-dark(#C27A2C, #E39A4E);
    --move: light-dark(#2D7D74, #5CC0B2);
    --sleep: light-dark(#3D4F8C, #9AA8F0);
    --mind: light-dark(#5E7F5A, #9CC59A);
    --vit: light-dark(#B86E1F, #F0A84A);
    --min: light-dark(#2F5DB0, #7FA7F2);
    --fat: light-dark(#1F7A64, #57C4A6);
    --macro: light-dark(#6A665E, #A49E92);

    /* Recipe illustration */
    --plate: light-dark(#FFFDF8, #EFE6D4);
    --tile: light-dark(#F3D27A, #3A3023);

    /* Accent swatches for the Settings picker: each accent as Paper or Ink shows it (Ink lifts it, as above) */
    --swatch-seal: light-dark(#C8341F, color-mix(in srgb, #C8341F 72%, #FFFFFF));
    --swatch-harbor: light-dark(#2F5D8A, color-mix(in srgb, #2F5D8A 72%, #FFFFFF));
    --swatch-garden: light-dark(#2F6B3F, color-mix(in srgb, #2F6B3F 72%, #FFFFFF));
    --swatch-plum: light-dark(#7A3E8E, color-mix(in srgb, #7A3E8E 72%, #FFFFFF));

    /* Elevation: one card per page leads with it */
    --shadow: 0 1px 1.5px light-dark(rgba(27, 26, 23, 0.06), rgba(255, 255, 255, 0.03)), 0 15px 31px -20px light-dark(rgba(27, 26, 23, 0.35), rgba(0, 0, 0, 0.75));
    /* The phone's Tell seal floats above the tab bar */
    --float: 0 14px 22px -12px rgba(0, 0, 0, 0.5);
}

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

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

/* Render one part of a page in a fixed theme (theme previews, the design kit). */
.scheme-paper {
    color-scheme: light;
}

.scheme-ink {
    color-scheme: dark;
}

:root[data-accent="harbor"] {
    --accent-base: #2F5D8A;
}

:root[data-accent="garden"] {
    --accent-base: #2F6B3F;
}

:root[data-accent="plum"] {
    --accent-base: #7A3E8E;
}