/* Generated from tokens.json by bin/build-tokens.php. Edit tokens.json, not this file. */

:root {
	/* Light aluminium, with the faintest warmth of the record light's red: the page. */
	--fr-color-ground: #F3F1F1;
	/* The logo's black: text, rules, outlines, the top bar and footer. */
	--fr-color-ink: #000000;
	/* Matte camera-body black: dark panels, the dates modal, filled buttons. */
	--fr-color-body: #1C1C1C;
	/* A control sitting on a dark panel. */
	--fr-color-body-raised: #2C2A2A;
	/* Outlines on a dark panel. */
	--fr-color-body-line: #3A3838;
	/* An unselected option's outline on a dark panel. */
	--fr-color-body-line-strong: #5A5656;
	/* The light grooves between the ribbing's ridges. */
	--fr-color-ribbing-light: #4D4949;
	/* The record light: the primary action and state markers only. */
	--fr-color-record: #C8161D;
	/* Long-form text on the ground, a step softer than ink. */
	--fr-color-text-soft: #2E2B2B;
	/* Secondary text on the ground: units, breadcrumbs, captions. As light as it goes while still 4.5:1 on the ground. */
	--fr-color-text-muted: #706B6B;
	/* Hairlines between list rows. */
	--fr-color-rule-soft: #D6D2D2;
	/* A row in a list of links under the pointer, such as a long page's index. */
	--fr-color-row-hover: #E9E6E6;
	/* The days between collect and return on a calendar: a pale tint of the record light's hue. */
	--fr-color-range: #E6D1D2;
	/* A shut day inside that span: the same tint, paler. */
	--fr-color-range-locked: #F1E4E5;
	/* A slide switch's track when it is off (a kit item left out). */
	--fr-color-switch-off: #BDB8B8;
	/* A day or time slot that can't be chosen, on the ground: below 4.5:1 on purpose, as it is not there to be read. */
	--fr-color-text-off: #A9A4A4;
	/* Text on a dark panel. */
	--fr-color-on-dark: #F3F1F1;
	/* Secondary text on a dark panel. */
	--fr-color-on-dark-soft: #BDB8B8;
	/* Markings on a dark panel. */
	--fr-color-on-dark-mark: #A9A4A4;
	/* Links in the black top bar. */
	--fr-color-bar-text: #E6E3E3;
	/* Text in the footer. */
	--fr-color-footer-text: #D9D5D5;
	/* Text on record red and on filled buttons. */
	--fr-color-white: #FFFFFF;
	/* Behind a modal or sheet. */
	--fr-color-scrim: rgba(0, 0, 0, 0.55);
	/* A button's action light, unlit, on the ink the button turns while it works. */
	--fr-color-led-off: #2C2A2A;
	/* The action light while the action works: flickering. */
	--fr-color-led-busy: #FF8A1F;
	/* The action light once the action is done: steady. */
	--fr-color-led-done: #3CD66E;
	/* The red of errors: the action light on a failure, and the line of a field found incorrect. */
	--fr-color-error: #B20000;

	/* Headings. */
	--fr-font-heading: 'Schibsted Grotesk', Arial, sans-serif;
	/* Everything else. */
	--fr-font-body: 'Instrument Sans', Arial, sans-serif;
	/* Capitals: the main navigation and the markings on camera-style controls. Nowhere else. */
	--fr-font-mark: 'Archivo', Arial, sans-serif;

	/* The home page's headline. */
	--fr-text-display: clamp(44px, 6vw, 86px);
	/* A page's or product's title. */
	--fr-text-title: clamp(44px, 4.5vw, 64px);
	/* A section heading, such as a product row's. */
	--fr-text-section: clamp(28px, 3vw, 40px);
	/* A modal's or sheet's heading. */
	--fr-text-panel: clamp(24px, 2.2vw, 30px);
	/* A product's name in a tile. */
	--fr-text-item: clamp(17px, 1.5vw, 21px);
	/* An introduction under a headline. */
	--fr-text-lead: clamp(17px, 1.4vw, 19px);
	/* Body text. */
	--fr-text-base: 17px;
	/* Body text at phone width. */
	--fr-text-base-narrow: 16px;
	/* Controls, secondary text. */
	--fr-text-small: 15px;
	/* The top bar. */
	--fr-text-bar: 14px;
	/* The main navigation. */
	--fr-text-nav: 16px;
	/* Markings on controls. */
	--fr-text-mark: 12px;
	/* Collect and return, over the chosen days. */
	--fr-text-mark-dates: 18px;

	--fr-weight-regular: 400;
	--fr-weight-medium: 500;
	--fr-weight-semibold: 600;
	--fr-weight-bold: 700;

	/* Headings set large. */
	--fr-tracking-display: -0.035em;
	/* Headings set small. */
	--fr-tracking-heading: -0.01em;
	/* Capitals. */
	--fr-tracking-mark: 0.12em;

	/* Large headings. */
	--fr-leading-tight: 1;
	/* Small headings, tile names. */
	--fr-leading-snug: 1.15;
	/* Running text. */
	--fr-leading-body: 1.5;

	/* Archivo's width for capitals. */
	--fr-mark-stretch: 72%;

	--fr-space-1: 4px;
	--fr-space-2: 8px;
	--fr-space-3: 12px;
	--fr-space-4: 16px;
	--fr-space-5: 20px;
	--fr-space-6: 24px;
	--fr-space-7: 32px;
	--fr-space-8: 48px;
	--fr-space-9: 56px;
	--fr-space-10: 72px;
	--fr-space-11: 88px;

	/* The widest a page's content goes, gutters included. */
	--fr-layout-container: 1320px;
	/* Side margin from tablet width up. */
	--fr-layout-gutter: 40px;
	/* Side margin at phone width. */
	--fr-layout-gutter-narrow: 16px;
	/* The longest a line of running text gets. */
	--fr-layout-measure: 34em;

	/* Buttons, inputs, switches: never a smaller target. */
	--fr-control-height: 44px;
	/* A full-width button at phone width. */
	--fr-control-height-wide: 48px;
	/* The one primary action on a product page. */
	--fr-control-height-large: 56px;
	/* Outlines of controls and section rules. */
	--fr-control-border: 2px;
	/* Row dividers. */
	--fr-control-hairline: 1px;

	/* A slide switch's track. */
	--fr-radius-switch: 4px;
	/* A slide switch's knob. */
	--fr-radius-knob: 2px;
	/* Buttons, and what acts as one: a time slot, a day, a choice in a list. */
	--fr-radius-control: 6px;
	/* A block inside a dark panel. Rounding is for buttons. */
	--fr-radius-inset: 0;
	/* A dark panel. Rounding is for buttons. */
	--fr-radius-panel: 0;
	/* A modal. Rounding is for buttons. */
	--fr-radius-modal: 0;
	/* A bottom sheet's top corners. Rounding is for buttons. */
	--fr-radius-sheet: 0;
	/* A saved card, which is drawn as a payment card and so keeps a card's corners. */
	--fr-radius-card: 12px;
	/* The kit list count. */
	--fr-radius-badge: 11px;

	/* The focus-ring ribbing, as a band. */
	--fr-motif-knurl-height: 10px;
	--fr-motif-knurl-height-narrow: 8px;
	/* The deeper band of ribbing over the footer. */
	--fr-motif-knurl-height-footer: 16px;
	--fr-motif-knurl-height-footer-narrow: 12px;
	/* Width of each dark ridge. */
	--fr-motif-knurl-ridge: 4px;
	/* Width of each light groove. */
	--fr-motif-knurl-groove: 2px;
	/* A fine mark of the lens distance scale. */
	--fr-motif-scale-height: 9px;
	/* Every third mark: a third taller, and the scale's whole height. */
	--fr-motif-scale-height-major: 12px;
	/* Distance between marks. */
	--fr-motif-scale-pitch: 12px;
	/* Width of a fine mark. */
	--fr-motif-scale-weight: 1px;
	/* Width of every third mark: twice a fine one. */
	--fr-motif-scale-weight-major: 2px;
	/* The record-light dot on a state change. */
	--fr-motif-dot: 8px;

	/* A control answering a press. */
	--fr-motion-quick: 120ms;
	/* A panel, modal or carousel page moving into place. */
	--fr-motion-settle: 240ms;
	/* Out of motion quickly, settling slowly, like a focus ring coming to rest. */
	--fr-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}