/*
 * Design tokens.
 *
 * The wireframes are deliberately style-free -- greyscale, "geen palet, geen
 * typografieschaal, geen merkstijl" -- and say styling comes from the target
 * codebase's design system. This repository had none, so this file is it: about
 * two dozen custom properties, and no CSS framework. A stock theme would have
 * to be argued out of its light greys on every screen, and light grey is the
 * one thing this app cannot have.
 *
 * Contrast is a requirement here, not a preference. These screens are read
 * outdoors, on a scaffold, in direct sunlight, at the end of a working day.
 * Every colour pair below that carries text clears 7:1 -- above WCAG AA -- and
 * the ratio is written next to it so a later edit has to think about it.
 *
 * No dark theme. An internal app read in sunlight wants one high-contrast light
 * theme, and a second one doubles the contrast checking for nobody's benefit.
 *
 * The brand comes from docs/brand/tokens.json, pulled from laqschilderwerken.nl:
 * orange, the site's near-black, cream and teal, Raleway and Josefin Sans. The
 * website is dark; this app is not, so the brand arrives as accents on light
 * surfaces. Where the site's own pairing fails the 7:1 rule -- white text on the
 * orange is 2.1:1 -- this file pairs the colour differently and leaves the
 * colour itself alone. A brand change starts in tokens.json, then lands here.
 */

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/raleway-latin-_TbmKKD.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: 'Raleway';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/raleway-latin-ext-5-ksv3o.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/josefin-sans-latin--i63bCi.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: 'Josefin Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/josefin-sans-latin-ext-GzhUiwk.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;

    /* ---- Surfaces ------------------------------------------------------- */

    /* The page itself. Not white: a white page behind white cards gives the
       cards no edge at all in bright light. A warm grey, from the brand's
       warm near-black rather than a neutral one. */
    --surface-sunken: #f0edea;
    --surface: #ffffff;

    /* Behind a bottom sheet (1d, 1e): the day stays visible, dimmed, so the
       painter keeps their place. */
    --backdrop: rgb(28 28 28 / 55%);

    /* The website's own background. The app wears it only outside the page:
       as the browser bar (theme-color) and behind the cream logo on the
       home-screen icons. Kept here so those literals have a source. */
    --brand-dark: #1c1c1c;

    /* ---- Text ----------------------------------------------------------- */

    --text: #1c1c1c;             /* 17.0:1 on white, 14.6:1 on sunken */
    --text-muted: #45423e;       /* 10.0:1 on white, 8.6:1 on sunken  */
    --text-on-accent: #ffffff;   /* 8.8:1 on the accent               */
    --text-on-primary: #1c1c1c;  /* 8.1:1 on primary, 11.5:1 on hover */

    /*
     * There is no third, lighter grey, and there must not be one. The handoff
     * is explicit: "geen lichte grijze tekst voor iets functioneels". Anything
     * lighter than --border below is a line, never a word.
     */

    /* ---- Lines ---------------------------------------------------------- */

    --border: #87837f;           /* 3.8:1 on white, 3.2:1 on sunken -- an edge, not text */
    --border-strong: #1c1c1c;    /* the heavier border of an invalid field               */
    --border-width: 1.5px;
    --border-width-strong: 2.5px;

    /* ---- Brand ---------------------------------------------------------- */

    /*
     * Two brand colours with two jobs.
     *
     * Primary is the site's orange, and it fills the primary button -- the one
     * thing the site uses it for too. It is a light colour: 2.1:1 against
     * white, so it never carries text on its own and never marks a state; dark
     * text goes on it instead. Hover lightens rather than darkens, because a
     * darker orange drops the dark text under 7:1.
     *
     * Accent is the site's teal (its submenu and its active-page underline).
     * It marks what is selected or current -- the nav item, a chip, a segment,
     * a bar -- and colours links and the focus ring, because a selected state
     * has to stand out from white in sunlight, and teal does at 8.8:1.
     */
    --primary: #eea342;
    --primary-hover: #ffcb84;
    --accent: #20515c;           /* 8.8:1 on white, 7.5:1 on sunken */
    --focus-ring: #20515c;

    /* ---- Day and week states -------------------------------------------- */

    /*
     * The four states a day or a week can be in, from the handoff: compleet,
     * onvolledig, leeg, vergrendeld. Each is a text colour and the tint it sits
     * on, because a pill needs both and a bar needs the text colour on its own.
     * They are named for the state, not for the colour, so that changing green
     * to something else stays a one-line change.
     */
    --state-complete-text: #0f4d26;
    --state-complete-surface: #d8efdd;          /* 8.2:1 */
    --state-incomplete-text: #6b3d00;
    --state-incomplete-surface: #fbe8c2;        /* 7.6:1 */
    --state-empty-text: #4a4a4a;
    --state-empty-surface: #eaeaea;             /* 7.4:1 */
    --state-locked-text: #24344d;
    --state-locked-surface: #dde3ec;            /* 9.7:1 */

    --state-error-text: #8a1414;
    --state-error-surface: #fbdcdc;             /* 7.5:1 */

    /* ---- Type ----------------------------------------------------------- */

    /* The brand's two families, self-hosted above: the CSP allows no font CDN. */
    --font: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-heading: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /*
     * Raleway has no tabular figures (no tnum feature), so a column of hours
     * set in it would not line up. Every number that sits in a column or is
     * compared at a glance -- the counters, the totals, the table figures --
     * uses this stack instead, whose fonts do have them.
     */
    --font-numeric: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --text-sm: 0.875rem;      /* sublines, table cells                       */
    --text-base: 1rem;        /* body, labels, buttons                       */
    --text-lg: 1.25rem;       /* screen and panel headings                   */
    --text-counter: 2.25rem;  /* the day total -- the largest type in the app */

    /* 500, as on the website: Raleway at 400 is thin enough that dark text on
       white reads lighter than its contrast ratio says, and that is the one
       thing this app cannot have. */
    --weight-regular: 500;
    --weight-bold: 700;

    /* ---- Spacing -------------------------------------------------------- */

    /*
     * One scale for both shells. What differs between them is --gutter, which
     * each shell sets for itself: the office is denser than the painter, whose
     * screen is held at arm's length with paint on it.
     */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --gutter: var(--space-4);

    /* ---- Radii ---------------------------------------------------------- */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-button: 20px;  /* the site's rounded buttons */

    /* ---- Tap targets ---------------------------------------------------- */

    /*
     * Normative in the handoff, not a suggestion: 44px minimum, 56px for the
     * primary actions, 64px for the stepper in screen 1e. Nothing in a template
     * hardcodes a height; it reads one of these.
     */
    --tap-min: 44px;
    --tap-primary: 56px;
    --tap-stepper: 64px;

    /* ---- Layout --------------------------------------------------------- */

    /* The painter's primary size is a 390px phone; the office is on 1920px. */
    --painter-width: 390px;
    --office-nav-width: 250px;
}