/*
    Core theme — design tokens.

    Source: designs/design_handoff_core_theme/design/_ds/loopt-design-system-2e4600b7-5195-48e5-91fc-639212e2c59c/tokens/
    The token files of the Loopt design system are ported here one to one. A rule
    in components.css reads a token. It never writes a hex value.

    This file has no build step. layouts/head/theme.blade.php loads it with a
    plain link element.

    Fonts are self-hosted in ../fonts/. Instrument Sans, Instrument Serif and
    IBM Plex Mono come from Google Fonts, Fredoka ships with the handoff. All
    four are SIL Open Font License 1.1. Only the latin and the latin-ext subset
    are here, because the shop speaks Dutch and English.

    Fredoka is the wordmark font. It stays a TrueType file, because the handoff
    gives no woff2 and this machine has no converter. It is 48 kB, and it prints
    one word.
*/

@font-face {
    font-family: 'Instrument Sans';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-italic-latin-ext.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: 'Instrument Sans';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-italic-latin.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 Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-ext.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: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin.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: swap;
    src: url('../fonts/instrument-serif-italic-latin-ext.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: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-italic-latin.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: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin-ext.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: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin-ext.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin-ext.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin.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: 'Fredoka';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/fredoka-variable.ttf') format('truetype-variations');
}

/* --------------------------------------------------------------------------
   Colour — tokens/colors.css
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces: bone first, never pure white. */
    --bone: #F4F1EC;
    --boneDeep: #E9E5DD;
    --paper: #FAF8F3;
    --ink: #11110F;

    /* Ink ramp, for text on bone. */
    --ink80: rgba(17, 17, 15, .80);
    --ink60: rgba(17, 17, 15, .60);
    --ink40: rgba(17, 17, 15, .40);
    --ink20: rgba(17, 17, 15, .20);
    --ink10: rgba(17, 17, 15, .10);

    /* Hairlines. */
    --line: rgba(17, 17, 15, .12);
    --lineSoft: rgba(17, 17, 15, .07);

    /* Royal: one blue (RGB 58, 110, 232) in three tints. */
    --r400: #9DB6F4;
    --r500: #3A6EE8;
    --r600: #315EC5;
    --accentSoft: rgba(58, 110, 232, .10);

    /* Values for the on-ink scope. */
    --onInk-text: #FAF8F3;
    --onInk-dim: rgba(255, 255, 255, .82);
    --onInk-muted: rgba(255, 255, 255, .55);
    --onInk-faint: rgba(255, 255, 255, .45);
    --onInk-line: rgba(255, 255, 255, .12);
    --onInk-lineStrong: rgba(255, 255, 255, .15);
    --onInk-avatar: #2a2a26;

    /* Semantic aliases. */
    --surface-page: var(--bone);
    --surface-raised: var(--paper);
    --surface-dark: var(--ink);
    --surface-disabled: var(--boneDeep);
    --surface-card: var(--bone);
    --text-heading: var(--ink);
    --text-body: var(--ink80);
    --text-secondary: var(--ink60);
    --text-muted: var(--ink40);
    --text-on-dark: var(--paper);
    --accent: var(--r500);
    --accent-deep: var(--r600);
    --accent-on-dark: var(--r400);
    --accent-tint: var(--accentSoft);
    --border-hairline: var(--line);
    --border-soft: var(--lineSoft);
    --focus-ring: rgba(17, 17, 15, .06);
    --danger: #9A2D1F;
    --danger-ring: rgba(154, 45, 31, .13);

    /* The edge of a control that carries a heavy action, on a hover. It is the
       danger colour at 35 per cent, thus the edge warns and does not shout.
       "Order detail.dc.html" writes it on the button `Cancel order`. */
    --danger-line: rgba(154, 45, 31, .35);

    /* Alternate accents: sub-brands and documents only, never mixed with Royal. */
    --alt-nacht: #1E2A52;
    --alt-petrol: #1A4D5C;
    --alt-mos: #2D5F3F;
    --alt-mosterd: #B8932B;
    --alt-klei: #B86A1F;
    --alt-bordeaux: #7A2E2E;

    /*
        Two status colours that the design system does not name semantically.
        The handoff takes them from the alternate accent list, and they are the
        only literals in the theme.
    */
    --status-ok: var(--alt-mos);
    --status-ok-tint: rgba(45, 95, 63, .07);
    --status-ok-line: rgba(45, 95, 63, .35);
    --status-warn: var(--alt-mosterd);
    --status-warn-tint: rgba(184, 147, 43, .09);
    --status-warn-line: rgba(184, 147, 43, .40);
}

/* --------------------------------------------------------------------------
   Typography — tokens/typography.css
   -------------------------------------------------------------------------- */

:root {
    --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --word: 'Fredoka', 'Instrument Sans', system-ui, sans-serif;

    --font-display: var(--sans);
    --font-body: var(--sans);
    --font-label: var(--mono);
    --font-accent: var(--serif);
    --font-wordmark: var(--word);

    /* Sizes. */
    --fs-display: clamp(46px, 7.2vw, 92px);
    --fs-h1: 36px;
    --fs-h2: clamp(32px, 4.6vw, 54px);
    --fs-h3: 19px;
    --fs-body-lg: 17px;
    --fs-body: 15px;
    --fs-body-sm: 14px;
    --fs-caption: 12px;
    --fs-mono: 11px;
    --fs-mono-sm: 10px;

    /* Weights. A heading is 500, never bold. */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Tracking. */
    --ls-display: -.04em;
    --ls-h2: -.035em;
    --ls-h3: -.02em;
    --ls-body: 0;
    --ls-mono: .10em;
    --ls-mono-tight: .06em;
    --ls-word: -.015em;

    /* Leading. */
    --lh-display: .95;
    --lh-heading: 1.05;
    --lh-body: 1.5;
    --lh-tight: 1.2;
}

/* --------------------------------------------------------------------------
   Spacing — tokens/spacing.css
   -------------------------------------------------------------------------- */

:root {
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 9px;
    --sp-4: 12px;
    --sp-5: 16px;
    --sp-6: 18px;
    --sp-7: 22px;
    --sp-8: 26px;
    --sp-9: 30px;
    --sp-10: 44px;
    --sp-11: 52px;
    --sp-12: 64px;

    --maxw: 1200px;
    --pad: clamp(20px, 5vw, 64px);
    --band-pad: clamp(64px, 9vw, 112px);
    --nav-h: 64px;

    /* The vertical rhythm of the handoff, "Spacing, radii, effects". */
    --block-gap: clamp(40px, 5vw, 64px);
    --section-gap: clamp(44px, 6vw, 72px);
}

/* --------------------------------------------------------------------------
   Radii — tokens/radii.css
   -------------------------------------------------------------------------- */

:root {
    /* Grounded, small radii. No pills, no cards of 16px or more. */
    --r1: 3px;  /* buttons, inputs, badges */
    --r2: 5px;  /* bordered containers */
    --r3: 6px;  /* cards, grids, panels */
    --radius-button: var(--r1);
    --radius-container: var(--r2);
    --radius-card: var(--r3);
}

/* --------------------------------------------------------------------------
   Layers — which element paints over which one

   The handoff writes a `z-index` on each page of its own, thus it gives the
   filter drawer and the cookie button the SAME number, 70. A tie is decided by
   the order in the document, and the cookie button stands later, so it painted
   over the drawer (shopper#219 comment 18214). Jonathan: *"Make sure that
   everything else besides the filters falls behind the filter slide in. Also
   the cookie banner button."*

   One scale, written down once, ends that class of defect. A rule reads a name
   here; no rule holds a bare number of its own.

   The order, from the bottom:

   0. a help balloon inside a form field
   1. a menu that hangs from a control in the page (the sort picker)
   2. the site header
   3. a panel that hangs from the header (the account menu)
   4. the round cookie button — page furniture, thus below every panel
   4b. the buy bar of a telephone — it holds the primary action of the product
       page, thus it paints over the round cookie button. The bar also lifts
       that button on a telephone, so neither one covers the other.
   5. the cookie curtain, the cookie bar, the cookie sheet, in that order
   6. a panel that covers the screen: the site menu and the filter drawer
   6b. a modal — it asks a question, thus it stands over the panel or the page
       that opened it
   7. a toast — it says what just happened, thus it stands over everything
   8. the skip link, which must be reachable at any moment

   The cookie bar falls behind an open filter drawer. That is what Jonathan
   asked for, and the bar comes back the moment the drawer closes.
   -------------------------------------------------------------------------- */

:root {
    --z-tip: 10;
    --z-dropdown: 30;
    --z-header: 50;
    --z-header-menu: 55;
    --z-fab: 58;
    --z-stickybuy: 59;
    --z-consent-scrim: 60;
    --z-consent: 62;
    --z-consent-sheet: 64;
    --z-panel: 70;
    --z-modal: 80;
    --z-toast: 90;
    --z-skip: 100;
}

/* --------------------------------------------------------------------------
   Effects — tokens/effects.css
   -------------------------------------------------------------------------- */

:root {
    /* Flat: a hairline separates. A shadow is for true elevation only. */
    --shadow-none: none;
    --shadow-elevation: 0 12px 32px rgba(17, 17, 15, .14);
    --ring-focus: 0 0 0 3px rgba(17, 17, 15, .06);
    --ring-error: 0 0 0 3px rgba(154, 45, 31, .13);
    --ease: .15s ease;
    --press-shift: translateY(1px);
    --arrow-nudge: translateX(3px);
    --icon-stroke: 2.2;
    --icon-stroke-check: 2.4;
    --mark-stroke: 6;
    --nav-blur: blur(10px);
    --nav-bg: rgba(250, 248, 243, .86);

    /* Control heights, from "Patterns to build once and reuse". */
    --h-control: 44px;
    --h-control-compact: 40px;
    --h-control-table: 32px;
    --h-field: 42px;
}