/* GENERATED by design/build-tokens.mjs from design/tokens — don't edit. */
/* Change the JSON in design/tokens, then run `node design/build-tokens.mjs`. */

:root {
  color-scheme: light;

  /* brand: The brand colours. Blue is for actions and the mark, ink for text, mist for surfaces, paper for the ground. Spark is only ever the Plus badge. */
  /* The mark on white, primary actions on light grounds, the background behind a white mark. */
  --brand-blue: #1E22E6;
  /* Text on light grounds; the macOS menu bar mark. */
  --brand-ink: #111219;
  /* Cards and tiles on light grounds. */
  --brand-mist: #F3F4FB;
  /* The light ground, and the mark on blue. */
  --brand-paper: #FFFFFF;
  /* The Plus badge. Nothing else. */
  --brand-spark: #FFC83D;

  /* font */
  /* One family everywhere. The wordmark is Figtree ExtraBold, outlined. */
  --font-family-base: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  /* Body text. */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  /* Labels, buttons, row titles. */
  --font-weight-bold: 700;
  /* Titles and display type. Tracked tight. */
  --font-weight-extrabold: 800;

  /* type: The app's type scale: Figtree, one family, big contrast. Line height is a multiple of the size; letter spacing is in px at that size. */
  /* The biggest words on a screen (welcome, empty states). */
  --type-display-size: 40px;
  --type-display-line-height: 1.05;
  --type-display-weight: 800;
  --type-display-tracking: -1.6px;
  --type-display: 800 40px/1.05 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Big figures (a pairing code, a size). Tabular figures. */
  --type-number-size: 36px;
  --type-number-line-height: 1;
  --type-number-weight: 800;
  --type-number-tracking: -1.08px;
  --type-number: 800 36px/1 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-number-font-variant-numeric: tabular-nums;
  /* Screen and sheet titles. */
  --type-title-size: 26px;
  --type-title-line-height: 1.15;
  --type-title-weight: 800;
  --type-title-tracking: -0.65px;
  --type-title: 800 26px/1.15 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Row titles and section heads. */
  --type-headline-size: 17px;
  --type-headline-line-height: 1.3;
  --type-headline-weight: 700;
  --type-headline-tracking: 0px;
  --type-headline: 700 17px/1.3 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Body text that needs weight. */
  --type-strong-size: 15px;
  --type-strong-line-height: 1.35;
  --type-strong-weight: 700;
  --type-strong-tracking: 0px;
  --type-strong: 700 15px/1.35 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Sentences. */
  --type-body-size: 15px;
  --type-body-line-height: 1.45;
  --type-body-weight: 500;
  --type-body-tracking: 0px;
  --type-body: 500 15px/1.45 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Small bold labels (Today, a chip). */
  --type-label-size: 13px;
  --type-label-line-height: 1.3;
  --type-label-weight: 700;
  --type-label-tracking: 0px;
  --type-label: 700 13px/1.3 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Meta lines under a row title. */
  --type-caption-size: 13px;
  --type-caption-line-height: 1.35;
  --type-caption-weight: 500;
  --type-caption-tracking: 0px;
  --type-caption: 500 13px/1.35 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-small-size: 12px;
  --type-small-line-height: 1.3;
  --type-small-weight: 500;
  --type-small-tracking: 0px;
  --type-small: 500 12px/1.3 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-tiny-size: 11px;
  --type-tiny-line-height: 1.25;
  --type-tiny-weight: 500;
  --type-tiny-tracking: 0px;
  --type-tiny: 500 11px/1.25 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Text on buttons. */
  --type-button-size: 15px;
  --type-button-line-height: 1.2;
  --type-button-weight: 700;
  --type-button-tracking: 0px;
  --type-button: 700 15px/1.2 Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* radius: Corner radii. Shapes are soft: nothing square, nothing fully round except pills and avatars. */
  /* Badges, small tags. */
  --radius-xs: 8px;
  /* File tiles, text fields, small buttons. */
  --radius-sm: 14px;
  /* Buttons, toasts, list rows. */
  --radius-md: 18px;
  /* Cards and device tiles. */
  --radius-lg: 22px;
  /* Big cards and panels. */
  --radius-xl: 28px;
  /* Sheets and dialogs. */
  --radius-sheet: 34px;
  /* Pills, chips and avatars. */
  --radius-pill: 999px;

  /* space: Spacing on a 4 px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* motion */
  /* Hover and press. */
  --duration-quick: 120ms;
  /* Most changes of state. */
  --duration-base: 200ms;
  /* The splash fading out; the throw's rest fading in with Reduce Motion. */
  --duration-fade: 250ms;
  /* The logo's throw, from appearing to settled (docs/logo.md §6). */
  --duration-throw: 850ms;
  /* Things moving on screen. */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Things arriving. */
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The light theme. The blocks below swap these for the dark one. */

  /* color: Theme colours for light grounds. Every name here must also be in color.dark.tokens.json. */
  /* The page behind everything. */
  --color-ground: #FFFFFF;
  /* The side column of a wide window: a step off the ground. */
  --color-sidebar: #F7F8FC;
  /* Cards and tiles. */
  --color-surface: #F3F4FB;
  /* Pressed or nested surfaces (the × on a draft, a selected chip). */
  --color-surface-strong: #E1E3EE;
  /* Buttons that sit on a surface (Copy, Deny). */
  --color-raised: #FFFFFF;
  /* Text. */
  --color-ink: #111219;
  /* The logo: brand blue on light grounds, white on dark ones. One colour, never a tint. */
  --color-mark: #1E22E6;
  /* Secondary text (captions, meta). */
  --color-text2: #646975;
  /* Body text that's quieter than ink (sentences under titles). */
  --color-text3: #3E4152;
  /* Hairlines and dividers. */
  --color-line: #E6E8F2;
  /* Outlines that need to show (fields, menus). */
  --color-line-strong: #E1E3EE;
  /* Dashed outlines (a drop target while dragging). */
  --color-dashed: #C9CCDE;
  /* Filled buttons, selected rows, progress. */
  --color-action: #1E22E6;
  /* Text and icons on an action fill. */
  --color-on-action: #FFFFFF;
  /* Blue text and icons on the ground (links). */
  --color-action-text: #1E22E6;
  /* Quieter text on an action fill; the soft blue behind a focus ring. */
  --color-action-soft: #E2E3FF;
  /* The inverted pill (Paste, toasts). */
  --color-dark: #111219;
  /* Text on the inverted pill. */
  --color-on-dark: #FFFFFF;
  /* Failures and destructive actions: a plain red, 4.6:1 or more on every light surface. */
  --color-danger: #D12D2D;
  /* The dashed ring around a device that's asleep. */
  --color-ring-asleep: #A3A6B8;
  /* The moon on an asleep device. */
  --color-moon: #5A5D6E;
  /* The dot beside Online. */
  --color-online: #12A150;
  /* The empty part of a progress bar. */
  --color-track: #E4E6F0;
  /* Behind Send now · Plus. */
  --color-spark-soft: #FFF6DC;
  /* Floating bars (the send bar, round header buttons). */
  --color-glass: #F0F1F8F0;
  /* The edge of a floating bar. */
  --color-glass-border: #FFFFFFF2;
  /* Behind dialogs and sheets. */
  --color-scrim: #1112196B;
  /* Drop shadows under floating cards and product shots. */
  --color-shadow: #1112191A;

  /* elevated: Dark mode only: a card floating over the window (a Mac popover or sheet) is a step lighter, so it reads as above the window and its buttons still show. Light mode needs nothing (a white card has its shadow). In light, each is the --color-* of the same name. */
  --elevated-surface-strong: #E1E3EE;
  --elevated-raised: #FFFFFF;
  --elevated-line-strong: #E1E3EE;

  /* tint: Device colours, one pair per tint: a soft fill behind the glyph, and the glyph. People pick one for each device. */
  --tint-mint-fill: #D9F4E8;
  --tint-mint-ink: #13795B;
  --tint-peach-fill: #FFE6D5;
  --tint-peach-ink: #B4501A;
  --tint-lilac-fill: #ECE6FF;
  --tint-lilac-ink: #5B3FC4;
  --tint-butter-fill: #FFF0C7;
  --tint-butter-ink: #8A6400;
  --tint-sky-fill: #DCE9FF;
  --tint-sky-ink: #2357B8;
  --tint-rose-fill: #FFE1EA;
  --tint-rose-ink: #B3245A;
  /* Anyone (links) and devices being added. */
  --tint-neutral-fill: #EEF0F6;
  --tint-neutral-ink: #4A4D5E;
}

/* The dark theme: when the system is dark and the page hasn't asked for light, */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* color: Theme colours for dark grounds. Neutrals sit on the brand blue's hue (OKLCH 266°) with very little chroma, so they read as cool graphite, not violet. Blues keep that hue as they get lighter: lightening in sRGB drifts them towards lavender. */
    --color-ground: #101215;
    --color-sidebar: #15171B;
    --color-surface: #1B1D22;
    --color-surface-strong: #272A30;
    --color-raised: #272A30;
    --color-ink: #F3F4F7;
    --color-mark: #FFFFFF;
    --color-text2: #A1A5AD;
    --color-text3: #C8CAD1;
    --color-line: #222429;
    --color-line-strong: #2F3237;
    --color-dashed: #4C5057;
    --color-action: #2D51F0;
    --color-on-action: #FFFFFF;
    --color-action-text: #89A9F4;
    --color-action-soft: #C9D7FA;
    --color-dark: #F3F4F7;
    --color-on-dark: #101215;
    --color-danger: #F87171;
    --color-ring-asleep: #6D727B;
    --color-moon: #A1A5AD;
    --color-online: #3DD68C;
    --color-track: #272A30;
    --color-spark-soft: #3A3016;
    --color-glass: #1B1D22EB;
    --color-glass-border: #FFFFFF1A;
    --color-scrim: #00000099;
    --color-shadow: #00000073;

    /* elevated: Dark mode only: a card floating over the window (a Mac popover or sheet) is a step lighter, so it reads as above the window and its buttons still show. Light mode needs nothing (a white card has its shadow). */
    --elevated-surface-strong: #34373E;
    --elevated-raised: #34373E;
    --elevated-line-strong: #3D4047;

    /* tint: Device colours, one pair per tint: a soft fill behind the glyph, and the glyph. People pick one for each device. */
    --tint-mint-fill: #15332A;
    --tint-mint-ink: #6FE0B0;
    --tint-peach-fill: #3A2619;
    --tint-peach-ink: #FFAD7A;
    --tint-lilac-fill: #2A2346;
    --tint-lilac-ink: #B9A6FF;
    --tint-butter-fill: #3A3016;
    --tint-butter-ink: #F5CF5E;
    --tint-sky-fill: #172A47;
    --tint-sky-ink: #8DB8FF;
    --tint-rose-fill: #3D1A28;
    --tint-rose-ink: #FF8FB8;
    /* Anyone (links) and devices being added. */
    --tint-neutral-fill: #272A30;
    --tint-neutral-ink: #C8CAD1;
  }
}

/* … or when the page asks for dark. The same values. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ground: #101215;
  --color-sidebar: #15171B;
  --color-surface: #1B1D22;
  --color-surface-strong: #272A30;
  --color-raised: #272A30;
  --color-ink: #F3F4F7;
  --color-mark: #FFFFFF;
  --color-text2: #A1A5AD;
  --color-text3: #C8CAD1;
  --color-line: #222429;
  --color-line-strong: #2F3237;
  --color-dashed: #4C5057;
  --color-action: #2D51F0;
  --color-on-action: #FFFFFF;
  --color-action-text: #89A9F4;
  --color-action-soft: #C9D7FA;
  --color-dark: #F3F4F7;
  --color-on-dark: #101215;
  --color-danger: #F87171;
  --color-ring-asleep: #6D727B;
  --color-moon: #A1A5AD;
  --color-online: #3DD68C;
  --color-track: #272A30;
  --color-spark-soft: #3A3016;
  --color-glass: #1B1D22EB;
  --color-glass-border: #FFFFFF1A;
  --color-scrim: #00000099;
  --color-shadow: #00000073;
  --elevated-surface-strong: #34373E;
  --elevated-raised: #34373E;
  --elevated-line-strong: #3D4047;
  --tint-mint-fill: #15332A;
  --tint-mint-ink: #6FE0B0;
  --tint-peach-fill: #3A2619;
  --tint-peach-ink: #FFAD7A;
  --tint-lilac-fill: #2A2346;
  --tint-lilac-ink: #B9A6FF;
  --tint-butter-fill: #3A3016;
  --tint-butter-ink: #F5CF5E;
  --tint-sky-fill: #172A47;
  --tint-sky-ink: #8DB8FF;
  --tint-rose-fill: #3D1A28;
  --tint-rose-ink: #FF8FB8;
  --tint-neutral-fill: #272A30;
  --tint-neutral-ink: #C8CAD1;
}