/* @generated by design/generate.py from design/tokens.json — DO NOT EDIT BY HAND. */

/* Bundled faces, copied from design/fonts/ by the same generator. Variable,
   so one file covers every weight a role asks for. */
@font-face {
  font-family: 'Petrona';
  src: url('/assets/fonts/Petrona.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Petrona';
  src: url('/assets/fonts/Petrona-Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Text';
  src: url('/assets/fonts/RedHatText.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Mono';
  src: url('/assets/fonts/RedHatMono.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour — semantic roles, named by what they do. */
  --lk-surface-canvas: #F2F6F3;
  --lk-surface-raised: #FFFFFF;
  --lk-surface-sunken: #E5ECE7;
  --lk-surface-overlay: #FFFFFF;
  --lk-surface-chrome: rgb(255 255 255 / 0.58);
  --lk-surface-chrome-solid: rgb(255 255 255 / 0.88);
  --lk-surface-inverse: #1D2A25;
  --lk-surface-container-lowest: #FFFFFF;
  --lk-surface-container-low: #F8FBF9;
  --lk-surface-container: #EDF2EE;
  --lk-surface-container-high: #E7EDE9;
  --lk-surface-container-highest: #E1E8E3;
  --lk-text-primary: #12201A;
  --lk-text-secondary: #46574F;
  --lk-text-tertiary: #586861;
  --lk-text-disabled: #9AA6A0;
  --lk-text-inverse: #E6EFEA;
  --lk-accent-fill: #1E7A4C;
  --lk-accent-fill-pressed: #17653E;
  --lk-accent-on: #FFFFFF;
  --lk-accent-text: #17663F;
  --lk-accent-subtle: #DDEEE3;
  --lk-accent-inverse: #6FD6A2;
  --lk-status-danger: #9C5238;
  --lk-status-on-danger: #FFFFFF;
  --lk-status-danger-subtle: #F4E6DF;
  --lk-status-warning: #85570F;
  --lk-status-success: #1E7A4C;
  --lk-status-highlight: #85650F;
  --lk-status-on-highlight: #FFFFFF;
  --lk-status-trend-up: #1F8A52;
  --lk-status-trend-down: #9C5238;
  --lk-border-hairline: rgb(18 32 26 / 0.08);
  --lk-border-subtle: rgb(18 32 26 / 0.05);
  --lk-border-control: #7A8B83;
  --lk-border-selected: #1E7A4C;
  --lk-border-focus: rgb(30 122 76 / 0.5);
  --lk-scrim-over-plant: rgb(242 246 243 / 0.86);
  --lk-scrim-sheet: rgb(0 0 0 / 0.32);
  --lk-fixed-paper: #F7FAF8;
  --lk-fixed-ink: #12201A;
  --lk-data-sparkline: #8A9B93;

  /* Type — the roles' families, iOS point sizes (as rem, so a reader's
     larger default text scales them the way Dynamic Type does), weights and
     tracking. No line height: iOS `lineSpacing` is leading *added* to the
     face's own, which CSS has no equivalent for, so main.css sets it. */
  --lk-font-display: 'Petrona', Georgia, 'Times New Roman', serif;
  --lk-font-text: 'Red Hat Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --lk-font-mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lk-type-large-title-family: var(--lk-font-display);
  --lk-type-large-title-size: 2.125rem;
  --lk-type-large-title-weight: 400;
  --lk-type-large-title-tracking: -0.0088em;
  --lk-type-headline-family: var(--lk-font-display);
  --lk-type-headline-size: 2.125rem;
  --lk-type-headline-weight: 400;
  --lk-type-headline-tracking: -0.0147em;
  --lk-type-plant-name-family: var(--lk-font-display);
  --lk-type-plant-name-size: 1.75rem;
  --lk-type-plant-name-weight: 400;
  --lk-type-plant-name-tracking: -0.0107em;
  --lk-type-title-family: var(--lk-font-display);
  --lk-type-title-size: 1.375rem;
  --lk-type-title-weight: 500;
  --lk-type-title-tracking: -0.0045em;
  --lk-type-observation-family: var(--lk-font-display);
  --lk-type-observation-size: 1.125rem;
  --lk-type-observation-weight: 400;
  --lk-type-observation-tracking: 0.0em;
  --lk-type-observation-style: italic;
  --lk-type-body-family: var(--lk-font-text);
  --lk-type-body-size: 1.0625rem;
  --lk-type-body-weight: 400;
  --lk-type-body-tracking: 0.0em;
  --lk-type-callout-family: var(--lk-font-text);
  --lk-type-callout-size: 0.9375rem;
  --lk-type-callout-weight: 400;
  --lk-type-callout-tracking: 0.0em;
  --lk-type-button-family: var(--lk-font-text);
  --lk-type-button-size: 1.0625rem;
  --lk-type-button-weight: 600;
  --lk-type-button-tracking: 0.0em;
  --lk-type-caption-family: var(--lk-font-text);
  --lk-type-caption-size: 0.8125rem;
  --lk-type-caption-weight: 400;
  --lk-type-caption-tracking: 0.0em;
  --lk-type-section-label-family: var(--lk-font-text);
  --lk-type-section-label-size: 0.8125rem;
  --lk-type-section-label-weight: 600;
  --lk-type-section-label-tracking: 0.0em;
  --lk-type-badge-family: var(--lk-font-text);
  --lk-type-badge-size: 0.6875rem;
  --lk-type-badge-weight: 600;
  --lk-type-badge-tracking: 0.0em;
  --lk-type-data-family: var(--lk-font-mono);
  --lk-type-data-size: 0.9375rem;
  --lk-type-data-weight: 500;
  --lk-type-data-tracking: 0.0em;
  --lk-type-data-caption-family: var(--lk-font-mono);
  --lk-type-data-caption-size: 0.6875rem;
  --lk-type-data-caption-weight: 500;
  --lk-type-data-caption-tracking: 0.0em;
  --lk-type-data-large-family: var(--lk-font-text);
  --lk-type-data-large-size: 1.375rem;
  --lk-type-data-large-weight: 600;
  --lk-type-data-large-tracking: 0.0em;
  --lk-type-nav-title-family: var(--lk-font-text);
  --lk-type-nav-title-size: 1.0625rem;
  --lk-type-nav-title-weight: 600;
  --lk-type-nav-title-tracking: 0.0em;

  /* Space — the same named grain the apps step on. */
  --lk-space-grain: 4px;
  --lk-space-pebble: 8px;
  --lk-space-moss: 12px;
  --lk-space-stone: 16px;
  --lk-space-gutter: 20px;
  --lk-space-path: 24px;
  --lk-space-clearing: 32px;
  --lk-space-garden: 48px;
  --lk-space-horizon: 64px;

  /* Shape. */
  --lk-radius-xs: 6px;
  --lk-radius-sm: 10px;
  --lk-radius-md: 14px;
  --lk-radius-lg: 22px;
  --lk-radius-xl: 28px;
  --lk-radius-full: 999px;
  --lk-stroke-hairline: 0.5px;
  --lk-target: 44px;
  --lk-control-button: 54px;

  /* Motion — bezier control points, so the site eases like the apps. */
  --lk-dur-plant-reveal: 800ms;
  --lk-ease-plant-reveal: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-gentle: 600ms;
  --lk-ease-gentle: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-slow-fade: 1000ms;
  --lk-ease-slow-fade: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-micro: 200ms;
  --lk-ease-micro: cubic-bezier(0.2, 0, 0, 1);
  --lk-dur-breathing: 3000ms;
  --lk-ease-breathing: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-annotation-reveal: 400ms;
  --lk-ease-annotation-reveal: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-lingering-fade: 2400ms;
  --lk-ease-lingering-fade: cubic-bezier(0.45, 0, 0.55, 1);
  --lk-dur-retract: 380ms;
  --lk-ease-retract: cubic-bezier(0.4, 0, 0.6, 1);

  /* Depth — light mode's tight contact shadow, and floating chrome. */
  --lk-shadow-card: 0 1px 3px rgb(18 32 26 / 0.08);
  --lk-shadow-floating: 0 8px 28px rgb(18 32 26 / 0.12);
  --lk-opacity-disabled: 0.38;
  --lk-opacity-pressed: 0.12;
}

/* Dark is the same glasshouse at night: green-black, not charcoal. Cards lift
   by surface colour there, so the card shadow goes away rather than deepening. */
@media (prefers-color-scheme: dark) {
  :root {
    --lk-surface-canvas: #0E1613;
    --lk-surface-raised: #17221E;
    --lk-surface-sunken: #09100D;
    --lk-surface-overlay: #1D2A25;
    --lk-surface-chrome: rgb(29 42 37 / 0.52);
    --lk-surface-chrome-solid: rgb(29 42 37 / 0.82);
    --lk-surface-inverse: #E6EFEA;
    --lk-surface-container-lowest: #09100D;
    --lk-surface-container-low: #121C18;
    --lk-surface-container: #17221E;
    --lk-surface-container-high: #1D2A25;
    --lk-surface-container-highest: #243129;
    --lk-text-primary: #E6EFEA;
    --lk-text-secondary: #A8B8B0;
    --lk-text-tertiary: #8C9D95;
    --lk-text-disabled: #56645E;
    --lk-text-inverse: #12201A;
    --lk-accent-fill: #4CC38A;
    --lk-accent-fill-pressed: #3EAD78;
    --lk-accent-on: #05140C;
    --lk-accent-text: #6FD6A2;
    --lk-accent-subtle: #173427;
    --lk-accent-inverse: #1E7A4C;
    --lk-status-danger: #D9967A;
    --lk-status-on-danger: #2A0E09;
    --lk-status-danger-subtle: #36231C;
    --lk-status-warning: #E0B060;
    --lk-status-success: #6FD6A2;
    --lk-status-highlight: #E3C27A;
    --lk-status-on-highlight: #1F1606;
    --lk-status-trend-up: #5ED49A;
    --lk-status-trend-down: #D9967A;
    --lk-border-hairline: rgb(230 239 234 / 0.09);
    --lk-border-subtle: rgb(230 239 234 / 0.05);
    --lk-border-control: #6E8078;
    --lk-border-selected: #6FD6A2;
    --lk-border-focus: rgb(111 214 162 / 0.5);
    --lk-scrim-over-plant: rgb(14 22 19 / 0.86);
    --lk-scrim-sheet: rgb(0 0 0 / 0.5);
    --lk-fixed-paper: #F7FAF8;
    --lk-fixed-ink: #12201A;
    --lk-data-sparkline: #6C7E76;
    --lk-shadow-card: none;
    --lk-shadow-floating: 0 8px 28px rgb(0 0 0 / 0.45);
  }
}