/*
 * Fieldbook design tokens. Palette: Midnight and straw.
 * One file for the marketing site and the app; the app copies it unchanged.
 * Generated from tokens.mjs. Edit there, not here.
 *
 * Theme switching:
 *   - default follows the OS (prefers-color-scheme);
 *   - [data-theme="light"] or [data-theme="dark"] on <html> forces a mode.
 * Every colour pair used here is measured against WCAG 2.2 AA: see contrast-report.md.
 */

:root {
  /* Brand constants: the same in both modes. Use the semantic tokens below for UI. */
  --fb-brand-midnight: #030164;
  --fb-brand-indigo: #363199;
  --fb-brand-steel: #2D7495;
  --fb-brand-straw: #E8E085;
  --fb-brand-paper: #FBFAEE;
  --fb-brand-gold: #A8800F;
  --fb-brand-gold-text: #8A6608;
  --fb-brand-indigo-light: #ACA8F5;
  --fb-brand-steel-light: #84C3E0;

  /* Fonts (self-hosted, see fonts/fonts.css) */
  --fb-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fb-font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --fb-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Type scale */
  --fb-type-h1-family: var(--fb-font-display);
  --fb-type-h1-size: 3rem;
  --fb-type-h1-weight: 700;
  --fb-type-h1-line-height: 1.05;
  --fb-type-h1-letter-spacing: -0.02em;
  --fb-type-h2-family: var(--fb-font-display);
  --fb-type-h2-size: 2.25rem;
  --fb-type-h2-weight: 700;
  --fb-type-h2-line-height: 1.1;
  --fb-type-h2-letter-spacing: -0.02em;
  --fb-type-h3-family: var(--fb-font-display);
  --fb-type-h3-size: 1.75rem;
  --fb-type-h3-weight: 700;
  --fb-type-h3-line-height: 1.15;
  --fb-type-h3-letter-spacing: -0.015em;
  --fb-type-h4-family: var(--fb-font-display);
  --fb-type-h4-size: 1.375rem;
  --fb-type-h4-weight: 600;
  --fb-type-h4-line-height: 1.25;
  --fb-type-h4-letter-spacing: -0.01em;
  --fb-type-h5-family: var(--fb-font-display);
  --fb-type-h5-size: 1.125rem;
  --fb-type-h5-weight: 600;
  --fb-type-h5-line-height: 1.3;
  --fb-type-h5-letter-spacing: 0;
  --fb-type-h6-family: var(--fb-font-display);
  --fb-type-h6-size: 1rem;
  --fb-type-h6-weight: 600;
  --fb-type-h6-line-height: 1.35;
  --fb-type-h6-letter-spacing: 0;
  --fb-type-subtitle1-family: var(--fb-font-body);
  --fb-type-subtitle1-size: 1.0625rem;
  --fb-type-subtitle1-weight: 700;
  --fb-type-subtitle1-line-height: 1.5;
  --fb-type-subtitle1-letter-spacing: 0;
  --fb-type-subtitle2-family: var(--fb-font-body);
  --fb-type-subtitle2-size: 0.9375rem;
  --fb-type-subtitle2-weight: 700;
  --fb-type-subtitle2-line-height: 1.5;
  --fb-type-subtitle2-letter-spacing: 0;
  --fb-type-body1-family: var(--fb-font-body);
  --fb-type-body1-size: 1rem;
  --fb-type-body1-weight: 400;
  --fb-type-body1-line-height: 1.6;
  --fb-type-body1-letter-spacing: 0;
  --fb-type-body2-family: var(--fb-font-body);
  --fb-type-body2-size: 0.9375rem;
  --fb-type-body2-weight: 400;
  --fb-type-body2-line-height: 1.55;
  --fb-type-body2-letter-spacing: 0;
  --fb-type-button-family: var(--fb-font-body);
  --fb-type-button-size: 0.9375rem;
  --fb-type-button-weight: 700;
  --fb-type-button-line-height: 1.5;
  --fb-type-button-letter-spacing: 0.01em;
  --fb-type-caption-family: var(--fb-font-body);
  --fb-type-caption-size: 0.8125rem;
  --fb-type-caption-weight: 400;
  --fb-type-caption-line-height: 1.45;
  --fb-type-caption-letter-spacing: 0.01em;
  --fb-type-overline-family: var(--fb-font-mono);
  --fb-type-overline-size: 0.75rem;
  --fb-type-overline-weight: 500;
  --fb-type-overline-line-height: 1.6;
  --fb-type-overline-letter-spacing: 0.08em;

  /* Radius */
  --fb-radius-xs: 4px;
  --fb-radius-sm: 6px;
  --fb-radius-md: 10px;
  --fb-radius-lg: 14px;
  --fb-radius-xl: 20px;
  --fb-radius-pill: 999px;

  /* Motion */
  --fb-duration-instant: 80ms;
  --fb-duration-fast: 150ms;
  --fb-duration-base: 240ms;
  --fb-duration-slow: 400ms;
  --fb-duration-slower: 640ms;
  --fb-duration-logo: 1500ms;
  --fb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fb-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fb-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --fb-ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --fb-stagger: 60ms;
  --fb-reveal-distance: 16px;

  /* Layout */
  --fb-appbar-height: 64px;
  --fb-drawer-width: 260px;
  --fb-content-max: 1200px;
  --fb-gutter: 16px;

  /* Light mode (default) */
  --fb-primary: #363199;
  --fb-on-primary: #FFFFFF;
  --fb-secondary: #2D7495;
  --fb-on-secondary: #FFFFFF;
  --fb-tertiary: #A8800F;
  --fb-on-tertiary: #030164;
  --fb-info: #1F64A8;
  --fb-on-info: #FFFFFF;
  --fb-success: #1E7A46;
  --fb-on-success: #FFFFFF;
  --fb-warning: #AA4E0A;
  --fb-on-warning: #FFFFFF;
  --fb-error: #B3261E;
  --fb-on-error: #FFFFFF;
  --fb-accent-text: #8A6608;
  --fb-bg: #FBFAEE;
  --fb-bg-sunken: #F3F1DE;
  --fb-surface: #FFFFFF;
  --fb-surface-raised: #FFFFFF;
  --fb-text: #030164;
  --fb-text-muted: #4E4D7A;
  --fb-text-disabled: rgba(3,1,100,0.38);
  --fb-line: #DEDCCB;
  --fb-line-soft: #ECEAD3;
  --fb-line-input: #85839F;
  --fb-appbar: #FBFAEE;
  --fb-appbar-text: #030164;
  --fb-appbar-icon: #363199;
  --fb-drawer: #FBFAEE;
  --fb-drawer-text: #030164;
  --fb-drawer-icon: #363199;
  --fb-focus: #363199;
  --fb-hover: rgba(54,49,153,0.06);
  --fb-selected: rgba(54,49,153,0.10);
  --fb-avatar-1: #6863D2; /* indigo */
  --fb-avatar-2: #2E799B; /* steel */
  --fb-avatar-3: #207E72; /* teal */
  --fb-avatar-4: #40802B; /* fern */
  --fb-avatar-5: #996808; /* wattle */
  --fb-avatar-6: #BC5215; /* ember */
  --fb-avatar-7: #CD3769; /* rose */
  --fb-avatar-8: #A14FBC; /* plum */
  --fb-avatar-text: #FFFFFF;
  --fb-shadow-xs: 0 1px 2px rgba(3,1,100,0.06);
  --fb-shadow-sm: 0 1px 2px rgba(3,1,100,0.06), 0 2px 6px rgba(3,1,100,0.06);
  --fb-shadow-md: 0 2px 4px rgba(3,1,100,0.06), 0 6px 16px rgba(3,1,100,0.08);
  --fb-shadow-lg: 0 4px 8px rgba(3,1,100,0.06), 0 12px 32px rgba(3,1,100,0.10);
  --fb-shadow-xl: 0 8px 16px rgba(3,1,100,0.08), 0 24px 56px rgba(3,1,100,0.14);
  /* Logo parts: straw sits on the indigo book; gold replaces straw where it touches a light page. */
  --fb-logo-book: #363199;
  --fb-logo-north: #E8E085;
  --fb-logo-tab: #A8800F;
  /* Marketing site (v1.3): --fb-site-* */
  --fb-site-spotlight: #030164;
  --fb-site-on-spotlight: #FBFAEE;
  --fb-site-spotlight-muted: #C9C7E6;
  --fb-site-spotlight-accent: #E8E085;
  --fb-site-spotlight-line: #2A2980;
  --fb-site-highlight: #F6F0C0;
  --fb-site-on-highlight: #030164;
  --fb-site-device: #14134F;
  --fb-site-glow-indigo: rgba(172,168,245,0.38);
  --fb-site-glow-straw: rgba(232,224,133,0.50);
  --fb-site-appbar-translucent: rgba(251,250,238,0.84);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fb-primary: #ACA8F5;
    --fb-on-primary: #030164;
    --fb-secondary: #84C3E0;
    --fb-on-secondary: #030164;
    --fb-tertiary: #E8E085;
    --fb-on-tertiary: #030164;
    --fb-info: #8EC5FF;
    --fb-on-info: #030164;
    --fb-success: #7FD8A4;
    --fb-on-success: #030164;
    --fb-warning: #FFB774;
    --fb-on-warning: #030164;
    --fb-error: #FF9C94;
    --fb-on-error: #030164;
    --fb-accent-text: #E8E085;
    --fb-bg: #07063F;
    --fb-bg-sunken: #050430;
    --fb-surface: #100F57;
    --fb-surface-raised: #18176B;
    --fb-text: #FBFAEE;
    --fb-text-muted: #C9C7E6;
    --fb-text-disabled: rgba(251,250,238,0.40);
    --fb-line: #2A2980;
    --fb-line-soft: #1C1B6A;
    --fb-line-input: #7C79C4;
    --fb-appbar: #07063F;
    --fb-appbar-text: #FBFAEE;
    --fb-appbar-icon: #ACA8F5;
    --fb-drawer: #07063F;
    --fb-drawer-text: #FBFAEE;
    --fb-drawer-icon: #ACA8F5;
    --fb-focus: #E8E085;
    --fb-hover: rgba(172,168,245,0.08);
    --fb-selected: rgba(172,168,245,0.14);
    /* Marketing site */
    --fb-site-spotlight: #1A1974;
    --fb-site-on-spotlight: #FBFAEE;
    --fb-site-spotlight-muted: #C9C7E6;
    --fb-site-spotlight-accent: #E8E085;
    --fb-site-spotlight-line: #3A39A0;
    --fb-site-highlight: #38365A;
    --fb-site-on-highlight: #E8E085;
    --fb-site-device: #2A2980;
    --fb-site-glow-indigo: rgba(104,99,210,0.34);
    --fb-site-glow-straw: rgba(232,224,133,0.10);
    --fb-site-appbar-translucent: rgba(7,6,63,0.84);
    --fb-avatar-1: #A8A4EF; /* indigo */
    --fb-avatar-2: #6FC0E6; /* steel */
    --fb-avatar-3: #5ED3C2; /* teal */
    --fb-avatar-4: #8ED572; /* fern */
    --fb-avatar-5: #E8E085; /* wattle */
    --fb-avatar-6: #FB9A62; /* ember */
    --fb-avatar-7: #EF8FAF; /* rose */
    --fb-avatar-8: #D195E4; /* plum */
    --fb-avatar-text: #030164;
    --fb-shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --fb-shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.25);
    --fb-shadow-md: 0 2px 4px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.30);
    --fb-shadow-lg: 0 4px 8px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.40);
    --fb-shadow-xl: 0 8px 16px rgba(0,0,0,0.35), 0 24px 56px rgba(0,0,0,0.50);
    --fb-logo-book: #6863D2;
    --fb-logo-north: #E8E085;
    --fb-logo-tab: #E8E085;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fb-primary: #ACA8F5;
  --fb-on-primary: #030164;
  --fb-secondary: #84C3E0;
  --fb-on-secondary: #030164;
  --fb-tertiary: #E8E085;
  --fb-on-tertiary: #030164;
  --fb-info: #8EC5FF;
  --fb-on-info: #030164;
  --fb-success: #7FD8A4;
  --fb-on-success: #030164;
  --fb-warning: #FFB774;
  --fb-on-warning: #030164;
  --fb-error: #FF9C94;
  --fb-on-error: #030164;
  --fb-accent-text: #E8E085;
  --fb-bg: #07063F;
  --fb-bg-sunken: #050430;
  --fb-surface: #100F57;
  --fb-surface-raised: #18176B;
  --fb-text: #FBFAEE;
  --fb-text-muted: #C9C7E6;
  --fb-text-disabled: rgba(251,250,238,0.40);
  --fb-line: #2A2980;
  --fb-line-soft: #1C1B6A;
  --fb-line-input: #7C79C4;
  --fb-appbar: #07063F;
  --fb-appbar-text: #FBFAEE;
  --fb-appbar-icon: #ACA8F5;
  --fb-drawer: #07063F;
  --fb-drawer-text: #FBFAEE;
  --fb-drawer-icon: #ACA8F5;
  --fb-focus: #E8E085;
  --fb-hover: rgba(172,168,245,0.08);
  --fb-selected: rgba(172,168,245,0.14);
  /* Marketing site */
  --fb-site-spotlight: #1A1974;
  --fb-site-on-spotlight: #FBFAEE;
  --fb-site-spotlight-muted: #C9C7E6;
  --fb-site-spotlight-accent: #E8E085;
  --fb-site-spotlight-line: #3A39A0;
  --fb-site-highlight: #38365A;
  --fb-site-on-highlight: #E8E085;
  --fb-site-device: #2A2980;
  --fb-site-glow-indigo: rgba(104,99,210,0.34);
  --fb-site-glow-straw: rgba(232,224,133,0.10);
  --fb-site-appbar-translucent: rgba(7,6,63,0.84);
  --fb-avatar-1: #A8A4EF; /* indigo */
  --fb-avatar-2: #6FC0E6; /* steel */
  --fb-avatar-3: #5ED3C2; /* teal */
  --fb-avatar-4: #8ED572; /* fern */
  --fb-avatar-5: #E8E085; /* wattle */
  --fb-avatar-6: #FB9A62; /* ember */
  --fb-avatar-7: #EF8FAF; /* rose */
  --fb-avatar-8: #D195E4; /* plum */
  --fb-avatar-text: #030164;
  --fb-shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --fb-shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.25);
  --fb-shadow-md: 0 2px 4px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.30);
  --fb-shadow-lg: 0 4px 8px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.40);
  --fb-shadow-xl: 0 8px 16px rgba(0,0,0,0.35), 0 24px 56px rgba(0,0,0,0.50);
  --fb-logo-book: #6863D2;
  --fb-logo-north: #E8E085;
  --fb-logo-tab: #E8E085;
  color-scheme: dark;
}

/* Reduced motion: keep fades, drop movement and long sequences. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fb-duration-slow: 1ms;
    --fb-duration-slower: 1ms;
    --fb-duration-logo: 1ms;
    --fb-stagger: 0ms;
    --fb-reveal-distance: 0px;
  }
}