/* Dimeowl design values for the website, as CSS variables.
   Made by brand/tools/build-tokens.mjs from brand/tokens/tokens.json. Do not edit by hand. */

:root {
  /* Colours */
  --color-blue-50: #F3F9FF; /* Light page ground; the owl's beak; the head of the reversed mark */
  --color-blue-100: #BFEBFB; /* Palest blue. Value assumed, still to be confirmed */
  --color-blue-300: #68CAFB; /* The brows of the reversed mark */
  --color-blue-400: #41A8F9;
  --color-blue-500: #2686E0; /* The owl's body. Not under white text (3.77:1) */
  --color-blue-600: #1B6FD1; /* The lightest blue allowed under white text (4.95:1) */
  --color-blue-700: #064490;
  --color-blue-900: #04235A;
  --color-blue-text: #1766C4; /* Links and small blue text on light grounds */
  --color-gold-300: #FFE08A; /* Coin highlight */
  --color-gold-500: #F4B63A; /* Coin. Never a background for text */
  --color-gold-700: #D9931A; /* Coin rim and shade */
  --color-gold-900: #8A5A00; /* Gold-coloured text, on light grounds only */
  --color-ink-900: #061A3D; /* Text on light grounds; the owl's pupils */
  --color-slate-600: #4A5F7E; /* Less important text on light grounds */
  --color-night-950: #030B1C; /* The darkest ground */
  --color-white: #FFFFFF;
  --color-page: var(--color-blue-50); /* Light ground: the page */
  --color-surface: var(--color-white); /* Light ground: cards */
  --color-raised: var(--color-white); /* Menus. Same white as a card; the shadow tells them apart */
  --color-tint: #EAF5FF; /* Light ground: icon tiles and quiet fills */
  --color-text: var(--color-ink-900); /* Text on light grounds */
  --color-text-muted: var(--color-slate-600); /* Less important text on light grounds */
  --color-link: var(--color-blue-text); /* Links and small blue text on light grounds */
  --color-brand: var(--color-blue-600); /* Brand fill under white text. #064490 and #04235A are also allowed */
  --color-on-brand: var(--color-white); /* All text on brand and night grounds, at full strength */
  --color-on-night-muted: rgba(255, 255, 255, 0.8); /* Less important text, on the night ground and #04235A only (10.03:1 or better). Never on the lighter brand blues */
  --color-gold-text: var(--color-gold-900); /* Amounts saved, on light grounds only. On brand grounds amounts are white */
  --color-error: #A61B14; /* Error text on light grounds */
  --color-error-fill: var(--deadline-red-bg); /* On a brand ground an error message sits on this fill, in --color-error, with the warning icon (5.79:1) */
  --color-border: #CFE0F2; /* Soft border. Decoration only (1.2 to 1.6:1) */
  --color-line-on-dark: rgba(255, 255, 255, 0.16); /* Thin rules on the night ground and #04235A, such as the footer's line. Decoration only */
  --color-receipt-line: #8FA6C4; /* Dotted and dashed receipt lines on light grounds */
  --color-receipt-line-on-brand: rgba(255, 255, 255, 0.55); /* Dotted and dashed receipt lines on a brand ground */
  --color-focus: var(--color-blue-600); /* Focus ring on light grounds */
  --color-focus-on-brand: var(--color-white); /* Focus ring on brand and night grounds and in the header (4.76:1 or better) */

  /* Deadline labels: fg is the text and icon, bg the fill. Never colour alone: always an icon and words */
  --deadline-green-fg: #0F6B3C; /* 15 or more days left */
  --deadline-green-bg: #DDF3E6;
  --deadline-yellow-fg: #735100; /* 7 to 14 days left */
  --deadline-yellow-bg: #FCEFC2;
  --deadline-orange-fg: #9A3F00; /* 3 to 6 days left */
  --deadline-orange-bg: #FFE1CC;
  --deadline-red-fg: #A61B14; /* 1 to 2 days left */
  --deadline-red-bg: #FCDAD7;
  --deadline-violet-fg: #5B32B4; /* Done (returned or price matched) */
  --deadline-violet-bg: #E9E1FB;
  --deadline-gray-fg: #4A5261; /* Expired */
  --deadline-gray-bg: #E9EBEF;

  /* Brand grounds. Rule: the lightest point of any ground that carries text must pass 4.5:1 with white. */
  --gradient-blue-surface: radial-gradient(85% 110% at 100% 0%, rgba(65,168,249,0.48) 0%, rgba(65,168,249,0) 60%), linear-gradient(to bottom right, #1B6FD1 0%, #064490 52%, #04235A 100%); /* Brand cards and buttons. Lightest point 4.76:1 with white, on any shape */
  --gradient-hero: linear-gradient(120deg, #1B6FD1 0%, #064490 46%, #04235A 100%); /* Hero ground. Lightest point 4.95:1 */
  --gradient-night: linear-gradient(180deg, #04235A 0%, #030B1C 100%); /* Night ground of the story. 15.07:1 */

  /* Font families */
  --font-heading: 'Rubik', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace; /* Receipt rows, prices and figures, timers */

  /* Text styles: use the classes in type.css, or these variables. Sizes in rem: 1rem is 16 px */
  --type-display-font: var(--font-heading);
  --type-display-weight: 700;
  --type-display-size: clamp(2.5rem, calc(1.4786rem + 4.1905vw), 5.25rem); /* 40 at 390, 84 at 1440 */
  --type-display-line: clamp(2.625rem, calc(1.65rem + 4vw), 5.25rem); /* 42 at 390, 84 at 1440 */
  --type-display-tracking: clamp(-0.1575rem, calc(-0.0101rem - 0.1638vw), -0.05rem);
  --type-h2-font: var(--font-heading);
  --type-h2-weight: 700;
  --type-h2-size: clamp(2rem, calc(1.6286rem + 1.5238vw), 3rem); /* 32 at 390, 48 at 1440 */
  --type-h2-line: clamp(2.375rem, calc(2.0036rem + 1.5238vw), 3.375rem); /* 38 at 390, 54 at 1440 */
  --type-h2-tracking: clamp(-0.06rem, calc(-0.0189rem - 0.0457vw), -0.03rem);
  --type-h3-font: var(--font-heading);
  --type-h3-weight: 600;
  --type-h3-size: clamp(1.25rem, calc(1.1571rem + 0.381vw), 1.5rem); /* 20 at 390, 24 at 1440 */
  --type-h3-line: clamp(1.625rem, calc(1.5321rem + 0.381vw), 1.875rem); /* 26 at 390, 30 at 1440 */
  --type-h3-tracking: clamp(-0.015rem, calc(0.0056rem - 0.0229vw), 0rem);
  --type-lead-font: var(--font-body);
  --type-lead-weight: 500;
  --type-lead-size: clamp(1.0625rem, calc(0.9929rem + 0.2857vw), 1.25rem); /* 17 at 390, 20 at 1440 */
  --type-lead-line: clamp(1.625rem, calc(1.5321rem + 0.381vw), 1.875rem); /* 26 at 390, 30 at 1440 */
  --type-lead-tracking: 0;
  --type-body-font: var(--font-body);
  --type-body-weight: 400;
  --type-body-size: clamp(1rem, calc(0.9768rem + 0.0952vw), 1.0625rem); /* 16 at 390, 17 at 1440 */
  --type-body-line: clamp(1.5625rem, calc(1.5161rem + 0.1905vw), 1.6875rem); /* 25 at 390, 27 at 1440 */
  --type-body-tracking: 0;
  --type-small-font: var(--font-body);
  --type-small-weight: 500;
  --type-small-size: clamp(0.8125rem, calc(0.7893rem + 0.0952vw), 0.875rem); /* 13 at 390, 14 at 1440 */
  --type-small-line: clamp(1.1875rem, calc(1.1643rem + 0.0952vw), 1.25rem); /* 19 at 390, 20 at 1440 */
  --type-small-tracking: 0;
  --type-small-strong-font: var(--font-body); /* Deadline labels, the story's labels */
  --type-small-strong-weight: 600;
  --type-small-strong-size: clamp(0.8125rem, calc(0.7893rem + 0.0952vw), 0.875rem); /* 13 at 390, 14 at 1440 */
  --type-small-strong-line: clamp(1.1875rem, calc(1.1643rem + 0.0952vw), 1.25rem); /* 19 at 390, 20 at 1440 */
  --type-small-strong-tracking: 0;
  --type-eyebrow-font: var(--font-body);
  --type-eyebrow-weight: 700;
  --type-eyebrow-size: clamp(0.75rem, calc(0.7268rem + 0.0952vw), 0.8125rem); /* 12 at 390, 13 at 1440 */
  --type-eyebrow-line: 1rem;
  --type-eyebrow-tracking: clamp(0.09rem, calc(0.0872rem + 0.0114vw), 0.0975rem);
  --type-button-font: var(--font-body);
  --type-button-weight: 700;
  --type-button-size: 1rem;
  --type-button-line: 1.25rem;
  --type-button-tracking: 0;
  --type-button-small-font: var(--font-body); /* The header button */
  --type-button-small-weight: 700;
  --type-button-small-size: 0.9375rem;
  --type-button-small-line: 1.25rem;
  --type-button-small-tracking: 0;
  --type-nav-font: var(--font-body); /* Desktop header links. The phone menu uses h2 */
  --type-nav-weight: 600;
  --type-nav-size: 0.9375rem;
  --type-nav-line: 1.25rem;
  --type-nav-tracking: 0;
  --type-receipt-row-font: var(--font-mono);
  --type-receipt-row-weight: 400;
  --type-receipt-row-size: clamp(0.875rem, calc(0.8518rem + 0.0952vw), 0.9375rem); /* 14 at 390, 15 at 1440 */
  --type-receipt-row-line: clamp(1.25rem, calc(1.2036rem + 0.1905vw), 1.375rem); /* 20 at 390, 22 at 1440 */
  --type-receipt-row-tracking: 0;
  --type-receipt-figure-font: var(--font-mono);
  --type-receipt-figure-weight: 500;
  --type-receipt-figure-size: clamp(2rem, calc(1.8143rem + 0.7619vw), 2.5rem); /* 32 at 390, 40 at 1440 */
  --type-receipt-figure-line: clamp(2.25rem, calc(2.0643rem + 0.7619vw), 2.75rem); /* 36 at 390, 44 at 1440 */
  --type-receipt-figure-tracking: clamp(-0.05rem, calc(-0.0363rem - 0.0152vw), -0.04rem);
  --type-fine-font: var(--font-body); /* The investment disclaimer only */
  --type-fine-weight: 500;
  --type-fine-size: 0.75rem;
  --type-fine-line: 1.0625rem;
  --type-fine-tracking: 0;

  /* The spacing steps. Every gap and padding is one of these or a --layout-* value. 72 is the phone's section padding; 6, 10 and 14 are used only inside labels (the error box counts as one), the header and receipt rows. */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;

  /* Page measurements */
  --layout-phone-width: 390px;
  --layout-desktop-width: 1440px;
  --layout-content-width: 1200px; /* Widest the content gets on desktop */
  --layout-side-margin: clamp(20px, calc(-17.143px + 9.5238vw), 120px); /* 20 at 390, 120 at 1440 */
  --layout-section-padding: clamp(72px, calc(51.2px + 5.3333vw), 128px); /* Top and bottom of a section. 72 at 390, 128 at 1440 */
  --layout-heading-to-content: clamp(32px, calc(26.057px + 1.5238vw), 48px); /* From a section's heading to what follows it. 32 at 390, 48 at 1440 */
  --layout-heading-to-text: clamp(16px, calc(13.029px + 0.7619vw), 24px); /* From a Display or H2 heading to its own paragraph. After an H3 the gap is --space-8. 16 at 390, 24 at 1440 */
  --layout-card-padding: clamp(20px, calc(15.543px + 1.1429vw), 32px); /* 20 at 390, 32 at 1440 */
  --layout-card-gap: clamp(16px, calc(13.029px + 0.7619vw), 24px); /* 16 at 390, 24 at 1440 */
  --layout-tap-target: 44px; /* The smallest thing a finger must hit, in both directions. A size, not a gap */
  --layout-control-height: clamp(52px, calc(51.257px + 0.1905vw), 54px); /* Buttons and fields. 52 at 390, 54 at 1440 */

  /* Corner radius */
  --radius-tile: 10px; /* Small icon tiles, under 40 px */
  --radius-inner: 14px; /* Icon tiles of 40 px and more inside cards; the top of a receipt card */
  --radius-card: 22px; /* Cards; the top of a large hero receipt */
  --radius-pill: 999px; /* Buttons, fields, labels, the desktop header */

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(6, 68, 144, 0.10);
  --shadow-raised: 0 14px 32px rgba(6, 68, 144, 0.20); /* Menus */
  --shadow-receipt: 0 16px 22px rgba(6, 68, 144, 0.30); /* Use as filter: drop-shadow(...), so it follows the scalloped edge */

  /* Glass: a fill, a backdrop blur and a border */
  --glass-header-fill: rgba(4, 20, 52, 0.32); /* The desktop header while the whole header is over the story and motion is on. Nowhere else */
  --glass-header-fill-solid: rgba(4, 35, 90, 0.88); /* The header's normal fill, desktop and phone. White on it: 10.5:1 or better on every ground */
  --glass-header-blur: 18px;
  --glass-header-border: 1px solid rgba(255, 255, 255, 0.18); /* The desktop header only; the phone bar has none */
  --glass-story-card-fill: rgba(255, 255, 255, 0.10); /* Copy cards in the story, on the night ground */
  --glass-story-card-blur: 0;
  --glass-story-card-border: 1px solid rgba(255, 255, 255, 0.18);
  --glass-story-label-fill: rgba(255, 255, 255, 0.12); /* The three labels in story beat 05 */
  --glass-story-label-blur: 0;
  --glass-story-label-border: none;

  /* Hover and press on buttons. Links get an underline on hover and keep their colour; fields change only for the focus ring. */
  --state-layer-ink: rgba(6, 26, 61, 0.10); /* Laid over a white button, a #1B6FD1 button or a blue-surface button on hover and press */
  --state-layer-white: rgba(255, 255, 255, 0.12); /* Laid over a #04235A or #064490 button on hover and press */
  --state-press-scale: 0.98; /* A pressed button shrinks to this, over --motion-press-duration. Not with reduced motion */

  /* Fine noise over brand grounds only. Added by the page, never baked into pictures. Contrast is measured without it. */
  --grain-opacity: 0.22;
  --grain-blend: soft-light;
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* fractal noise, frequency 0.8, 2 octaves, a 200 px tile that repeats without a seam */

  /* Line icons: drawn on a 24 by 24 grid, no fill, round ends and corners, in the colour of the text around them. */
  --icon-stroke: 2.2; /* Line width on the 24 grid, for icons shown at 20 px or larger */
  --icon-stroke-small: 2.4; /* Line width on the 24 grid, for icons shown under 20 px */

  /* Focus ring: colour from --color-focus, or --color-focus-on-brand on brand and night grounds and in the header */
  --focus-ring-width: 3px;
  --focus-ring-gap: 2px; /* The ring always keeps this gap from the thing it surrounds */

  /* Receipt parts: border-bottom: var(--receipt-leader) var(--color-receipt-line) */
  --receipt-leader: 1px dotted; /* Joins a label to its value and fills the space between */
  --receipt-divider: 1px dashed;
  --receipt-scallop-width: 12px; /* Half-circles along the bottom edge of a receipt card */
  --receipt-scallop-step: 16px; /* One half-circle every 16 px. Card widths are multiples of 16 */
  --receipt-header-tracking: 0.22em; /* DIMEOWL in DM Mono at the top of a paper receipt. Not used on the first website */

  /* Durations in milliseconds. With reduce-motion on: nothing moves; changes are instant or use --motion-fade-duration. */
  --motion-press-duration: 120ms; /* Press feedback */
  --motion-press-easing: ease-out;
  --motion-enter-duration: 200ms; /* Small things entering: labels, copy */
  --motion-enter-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-panel-duration: 320ms; /* Panels, the phone menu */
  --motion-panel-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-fade-duration: 200ms; /* The short fade used in place of movement when reduce-motion is on */
  --motion-fade-easing: ease-out;
  --motion-owl-reaction-duration: 1000ms;
  --motion-owl-blink-duration: 180ms;
  --motion-owl-blink-easing: ease-in-out;
  --motion-owl-blink-close: 70ms;
  --motion-owl-blink-closed: 40ms;
  --motion-owl-blink-open: 70ms;
  --motion-owl-blink-squash: 0.13; /* Each eye is squashed to this share of its height */
  --motion-owl-blink-interval: 4000ms; /* The owl blinks no more than once in this time */

  /* How far things move, from docs/website-script.md section 10. */
  --motion-distance-copy: 16px; /* Copy slides in and out by this much */
  --motion-distance-card: 12px; /* Cards rise by this much as they come into view */
}