/* GENERATED by scripts/build_fc_tokens.php from docs/design-system/FINAL-TOKENS.md.
 * Do not edit by hand: edit the doc and re-run the script.
 * Light on :root; dark on html.dark-mode (the site's switch). */
:root {
    /* Colour */
    --primary: #0267a1;
    --primary-light: #4a9ccf;
    --primary-dark: #013f63;
    --navy: #013f63;
    --header-tabrow: #0b2f4a;
    --header-tab-active: #3b8fd9;
    --secondary: #007a99;
    --secondary-light: #33bfe0;
    --display-on-navy: #a8d4f2;
    --brand-blue: #0267a1;
    --brand-navy: #013f63;
    --brand-cyan: #33bfe0;
    --ink: #07182a;
    --success: #2e7d32;
    --warning: #9a5b00;
    --error: #c62828;
    --info: #1565c0;
    --success-bg: #e8f5e9;
    --warning-bg: #fff3e0;
    --danger-bg: #ffebee;
    --info-bg: #e3f2fd;
    --bg: #ffffff;
    --bg-secondary: #f5f7f9;
    --surface: #ffffff;
    --surface-variant: #f0f4f8;
    --card: #ffffff;
    --input: #f0f4f8;
    --drawer: #ffffff;
    --skeleton: #dee2e6;
    --text: #333333;
    --text-secondary: #646b72;
    --text-tertiary: #697077;
    --placeholder: var(--text-tertiary);
    --heading: #013f63;
    --text-inverse: #ffffff;
    --text-on-primary: #ffffff;
    --text-on-image: #ffffff;
    --text-on-header: #ffffff;
    --text-on-header-muted: rgba(255, 255, 255, 0.72);
    --text-on-medal: #1a1a1a;
    --border: #dee2e6;
    --border-light: #f0f0f0;
    --divider: #f0f0f0;
    --card-border: #e5e7eb;
    --input-border: #dee2e6;
    --scrim: rgba(0, 0, 0, 0.5);
    --on-header-pill: rgba(255, 255, 255, 0.15);
    --image-badge: rgba(0, 0, 0, 0.7);
    --tabbar: #0e2438;
    --tabbar-active: #4a90d9;
    --tabbar-inactive: #9ba1a6;
    --fab: #3b8fd9;
    --gold: #ffd700;
    --icon-gold: #b07d00;
    --silver: #c0c0c0;
    --bronze: #cd7f32;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;
    --space-5xl: 64px;

    /* Radius */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-fab: 0 4px 8px rgba(74, 144, 217, 0.3);
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0267a1;

    /* Size */
    --size-header-bar: 52px;
    --size-header-tabs: 44px;
    --size-logo: 32px;
    --size-touch: 44px;
    --size-header-touch: 56px;
    --size-input: 48px;
    --size-row: 56px;
    --size-chip: 36px;
    --size-fab: 56px;
    --size-avatar-sm: 32px;
    --size-avatar-md: 40px;
    --size-avatar-lg: 80px;
    --size-count-bubble: 18px;

    /* Icon size */
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 28px;
    --icon-empty: 48px;

    /* Border width */
    --border-hairline: 1px;
    --border-default: 1px;
    --border-strong: 1.5px;
    --border-selected: 2px;
    --border-tab: 3px;

    /* Z-index */
    --z-base: 0;
    --z-sticky: 20;
    --z-header: 100;
    --z-dropdown: 200;
    --z-drawer: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Type: font shorthands, used as `font: var(--type-body)` */
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* web only */
    --type-display-xl: 800 44px/1.05 var(--font-system);
    --type-display-xl-tracking: -0.02em;
    --type-display-l: 800 36px/1.05 var(--font-system);
    --type-display-l-tracking: -0.02em;
    --type-display-m: 800 28px/1.1 var(--font-system);
    --type-display-m-tracking: -0.02em;
    --type-display-s: 800 30px/1.1 var(--font-system);
    --type-display-s-tracking: -0.02em;
    --type-section: 600 20px/1.3 var(--font-system);
    --type-stat: 700 30px/1.2 var(--font-system);
    --type-title-root: 700 24px/1.2 var(--font-system);
    --type-title-detail: 600 18px/1.2 var(--font-system);
    --type-heading: 600 16px/1.5 var(--font-system);
    --type-body: 400 16px/22px var(--font-system);
    --type-value: 700 16px/22px var(--font-system);
    --type-button: 600 16px/20px var(--font-system);
    --type-label: 500 14px/1.5 var(--font-system);
    --type-caption: 400 12px/1.5 var(--font-system);
    --type-field-label: 500 14px/1.5 var(--font-system);
    --type-field-help: 400 14px/1.5 var(--font-system);
    --type-overline: 600 12px/1.5 var(--font-system);
    --type-overline-tracking: 0.5px;
    --type-micro: 500 10px/1.2 var(--font-system);

    /* Motion */
    --motion-fast: 150ms;
    --motion-normal: 300ms;
    --motion-slow: 500ms;
    --press-opacity: 0.7;
}

html.dark-mode {
    /* Colour */
    --primary: #5aaee8;
    --primary-light: #8cc8f0;
    --primary-dark: #2f7fb8;
    --navy: #0e2438;
    --secondary: #2ec4e6;
    --secondary-light: #6ad6ee;
    --success: #4cc38a;
    --warning: #f5b04c;
    --error: #ff7a7a;
    --info: #62b5f2;
    --success-bg: #143324;
    --warning-bg: #3a2c14;
    --danger-bg: #3d1c20;
    --info-bg: #132c44;
    --bg: #0b141d;
    --bg-secondary: #101b26;
    --surface: #15212d;
    --surface-variant: #1c2a38;
    --card: #15212d;
    --input: #1c2a38;
    --drawer: #15212d;
    --skeleton: #2a3a4a;
    --text: #e6edf3;
    --text-secondary: #a9b6c3;
    --text-tertiary: #8494a3;
    --heading: #a8d4f2;
    --text-inverse: #07182a;
    --text-on-primary: #07182a;
    --border: #2a3a4a;
    --border-light: #1f2d3b;
    --divider: #1f2d3b;
    --card-border: #243444;
    --input-border: #34475a;
    --scrim: rgba(0, 0, 0, 0.65);
    --tabbar: #0f1923;
    --tabbar-active: #5aaee8;
    --tabbar-inactive: #8e9aa6;
    --icon-gold: #ffd700;

    /* Shadow */
    --focus-ring: 0 0 0 2px #0b141d, 0 0 0 4px #5aaee8;
}