/* @fairleadhq/design-system@0.2.5 - target tokens.css */
/* Fairlead target tokens. Generated by target/build/build-target.mjs from target/tokens.source.mjs.
   Do not edit. Every colour pair below has passed the contrast gate in both modes. */

:root {
  color-scheme: light dark;
  --fl-surface-page: light-dark(#F5F6F8, #0A1B35);
  --fl-surface-card: light-dark(#FCFCFD, #122542);
  --fl-surface-raised: light-dark(#FFFFFF, #1C304F);
  --fl-surface-inset: light-dark(#ECEEF2, #05132B);
  --fl-surface-code: light-dark(#ECEEF2, #05132B);
  --fl-surface-subtle: light-dark(#ECEEF2, #1C304F);
  --fl-surface-hover: light-dark(#E5E8EE, #223757);
  --fl-surface-overlay: light-dark(#0B1B3466, #00000099);
  --fl-text-strong: light-dark(#0B1B34, #F3F5F9);
  --fl-text-body: light-dark(#334155, #C5CDD9);
  --fl-text-muted: light-dark(#5B6678, #A0ACBF);
  --fl-border-subtle: light-dark(#E4E7EC, #2A3D5C);
  --fl-border-default: light-dark(#CDD3DC, #344867);
  --fl-border-control: light-dark(#7A8699, #758092);
  --fl-status-success-fg: light-dark(#00784C, #52B583);
  --fl-status-success-bg: light-dark(#E6EEEA, #1B3D4F);
  --fl-status-success-border: light-dark(#A9C9B6, #27595C);
  --fl-status-success-solid: #1B8759;
  --fl-status-success-tint: light-dark(#52B583, #59BB89);
  --fl-status-danger-fg: light-dark(#BA3C34, #FE7A6C);
  --fl-status-danger-bg: light-dark(#F8E9E8, #3C364C);
  --fl-status-danger-border: light-dark(#E9B5AE, #684856);
  --fl-status-danger-solid: #CB4C42;
  --fl-status-danger-tint: light-dark(#F37063, #FA7669);
  --fl-status-warning-fg: light-dark(#935C00, #D69642);
  --fl-status-warning-bg: light-dark(#F2EBE6, #333A48);
  --fl-status-warning-border: light-dark(#D5BEA5, #58504D);
  --fl-status-warning-solid: #A66900;
  --fl-status-warning-tint: light-dark(#CF903C, #D69643);
  --fl-status-info-fg: light-dark(#235DE7, #72A1FF);
  --fl-status-info-bg: light-dark(#E5EDFD, #213961);
  --fl-status-info-border: light-dark(#A7C3FA, #345185);
  --fl-status-info-solid: #316DF7;
  --fl-status-info-tint: light-dark(#6A9BFF, #74A2FF);
  --fl-status-neutral-fg: light-dark(#5E697C, #97A3B7);
  --fl-status-neutral-bg: light-dark(#EBECEF, #283A56);
  --fl-status-neutral-border: light-dark(#BDC2CA, #41526D);
  --fl-status-neutral-solid: #6C778A;
  --fl-status-neutral-tint: light-dark(#939FB3, #99A5B9);
  --fl-viz-1: light-dark(#447EFF, #3A77FF);
  --fl-viz-2: light-dark(#C3703B, #BD6A35);
  --fl-viz-3: light-dark(#1B948B, #0C8F86);
  --fl-viz-4: light-dark(#896DFF, #8466FC);
  --fl-viz-5: light-dark(#309667, #289161);
  --fl-viz-6: light-dark(#DF566C, #D85066);
  --fl-viz-7: light-dark(#0092AB, #008CA3);
  --fl-viz-8: light-dark(#B6781E, #B07213);
  --fl-on-status-solid: #FFFFFF;
  --fl-shadow-popover: light-dark(0 4px 16px -2px rgb(11 27 52 / 0.12), 0 1px 3px rgb(11 27 52 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.5));
  --fl-shadow-dialog: light-dark(0 16px 48px -8px rgb(11 27 52 / 0.22), 0 2px 6px rgb(11 27 52 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 64px -12px rgb(0 0 0 / 0.65));
  --fl-accent: light-dark(#235DE7, #6D9DFF);
  --fl-accent-hover: light-dark(#164FD7, #83ACFF);
  --fl-accent-active: light-dark(#0941C9, #97BAFF);
  --fl-accent-wash: light-dark(#E8EFFD, #1F365D);
  --fl-surface-selected: light-dark(#E8EFFD, #1F365D);
  --fl-accent-border: light-dark(#A3C0F9, #345288);
  --fl-highlight-wash: light-dark(#C6D8FC, #2E4B7D);
  --fl-on-accent: light-dark(#FFFFFF, #08101C);
  --fl-accent-band: #235DE7;
  --fl-accent-band-hover: #1F53CC;
  --fl-accent-band-border: #6492F3;
  --fl-accent-band-control: #A9C5FB;
  --fl-accent-band-action-hover: #F1F6FF;
  --fl-accent-band-action-active: #E3EDFF;
  --fl-focus-ring: var(--fl-accent);
  --fl-text-link: var(--fl-accent);
  --fl-highlight: var(--fl-accent);
  --fl-font-brand: 'Jost', 'IBM Plex Sans', system-ui, sans-serif;
  --fl-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fl-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fl-font-size-2xs: 0.6875rem;
  --fl-font-size-xs: 0.75rem;
  --fl-font-size-sm: 0.8125rem;
  --fl-font-size-md: 0.875rem;
  --fl-font-size-base: 1rem;
  --fl-font-size-lg: 1.125rem;
  --fl-font-size-xl: 1.25rem;
  --fl-font-size-2xl: 1.5rem;
  --fl-font-size-3xl: 1.875rem;
  --fl-font-size-4xl: 2.375rem;
  --fl-font-size-5xl: 3rem;
  --fl-font-size-6xl: 3.75rem;
  --fl-font-size-7xl: 4.75rem;
  --fl-line-height-tight: 1.1;
  --fl-line-height-snug: 1.25;
  --fl-line-height-normal: 1.5;
  --fl-line-height-relaxed: 1.65;
  --fl-font-weight-regular: 400;
  --fl-font-weight-medium: 500;
  --fl-font-weight-semibold: 600;
  --fl-tracking-tight: -0.02em;
  --fl-tracking-snug: -0.01em;
  --fl-tracking-normal: 0;
  --fl-tracking-wide: 0.04em;
  --fl-space-0: 0;
  --fl-space-1: 0.25rem;
  --fl-space-2: 0.5rem;
  --fl-space-3: 0.75rem;
  --fl-space-4: 1rem;
  --fl-space-5: 1.25rem;
  --fl-space-6: 1.5rem;
  --fl-space-8: 2rem;
  --fl-space-10: 2.5rem;
  --fl-space-12: 3rem;
  --fl-space-16: 4rem;
  --fl-space-20: 5rem;
  --fl-space-24: 6rem;
  --fl-space-32: 8rem;
  --fl-radius-sm: 4px;
  --fl-radius-md: 6px;
  --fl-radius-lg: 8px;
  --fl-radius-full: 999px;
  --fl-layout-measure: 68ch;
  --fl-layout-content: 72rem;
  --fl-layout-wide: 88rem;
  --fl-layout-gutter: 1.5rem;
  --fl-layer-base: 0;
  --fl-layer-sticky: 100;
  --fl-layer-dropdown: 200;
  --fl-layer-overlay: 300;
  --fl-layer-dialog: 400;
  --fl-layer-toast: 500;
  --fl-duration-fast: 100ms;
  --fl-duration-base: 160ms;
  --fl-duration-slow: 240ms;
  --fl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fl-border-width: 1px;
  --fl-focus-ring-width: 2px;
  --fl-focus-ring-offset: 2px;
}

/* Mode. With no attribute the operating system preference applies. Works on any element. */
[data-mode="light"] { color-scheme: light; }
[data-mode="dark"] { color-scheme: dark; }

/* The brand navy band. Tokens inside resolve to their dark values, in either mode. */
[data-surface="ink"] {
  color-scheme: dark;
  --fl-surface-page: #0B1B34;
  --fl-surface-card: #11264A;
  --fl-surface-raised: #19335E;
  --fl-surface-inset: #071327;
  --fl-surface-code: #071327;
  --fl-surface-subtle: #19335E;
  --fl-surface-hover: #1A3461;
  --fl-border-subtle: #1B335A;
  --fl-border-default: #2A4674;
  background-color: var(--fl-surface-page);
  color: var(--fl-text-body);
}

/* In dark mode the brand navy is one step from the page, so the band's ground is lifted. */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-surface="ink"] {
    --fl-surface-page: #1D3459;
    --fl-surface-card: #182D50;
    --fl-surface-inset: #132646;
    --fl-surface-code: #132646;
  }
}
:where([data-mode="light"]) [data-surface="ink"] {
  --fl-surface-page: #0B1B34;
  --fl-surface-card: #11264A;
  --fl-surface-inset: #071327;
  --fl-surface-code: #071327;
}
:where([data-mode="dark"]) [data-surface="ink"], [data-mode="dark"][data-surface="ink"] {
  --fl-surface-page: #1D3459;
  --fl-surface-card: #182D50;
  --fl-surface-inset: #132646;
  --fl-surface-code: #132646;
}

/* The section tone. A mist blue in light mode, a deeper navy in dark. Only the ground changes. */
[data-surface="tint"] {
  --fl-surface-page: light-dark(#E3ECF9, #031026);
  --fl-border-subtle: light-dark(#CBD6E8, #1A2B47);
  background-color: var(--fl-surface-page);
}

/* The solid accent band. The theme's deep accent in both modes, white text, an inverted action. */
[data-surface="accent"][data-surface] {
  color-scheme: dark;
  --fl-surface-page: var(--fl-accent-band);
  --fl-surface-card: var(--fl-accent-band);
  --fl-surface-raised: var(--fl-accent-band);
  --fl-surface-inset: var(--fl-accent-band);
  --fl-surface-code: var(--fl-accent-band);
  --fl-surface-subtle: var(--fl-accent-band);
  --fl-surface-hover: var(--fl-accent-band-hover);
  --fl-text-strong: #FFFFFF;
  --fl-text-body: #FFFFFF;
  --fl-text-muted: #FFFFFF;
  --fl-border-subtle: var(--fl-accent-band-border);
  --fl-border-default: var(--fl-accent-band-border);
  --fl-border-control: var(--fl-accent-band-control);
  --fl-accent: #FFFFFF;
  --fl-accent-hover: var(--fl-accent-band-action-hover);
  --fl-accent-active: var(--fl-accent-band-action-active);
  --fl-on-accent: var(--fl-accent-band);
  --fl-accent-wash: var(--fl-accent-band-hover);
  --fl-surface-selected: var(--fl-accent-band-hover);
  --fl-accent-border: var(--fl-accent-band-control);
  --fl-focus-ring: #FFFFFF;
  --fl-text-link: #FFFFFF;
  --fl-highlight: #FFFFFF;
  --fl-highlight-wash: var(--fl-accent-band-hover);
  background-color: var(--fl-accent-band);
  color: var(--fl-text-body);
}