/* tokens.css: every colour, font size, space and timing used on the site.
   The dark theme only changes these values. */

:root {
  color-scheme: light;

  /* Palette */
  --c-navy: #102a43;
  --c-navy-2: #163a63;
  --c-blue: #245a94;
  --c-blue-2: #3678b7;
  --c-steel: #4682a9;
  --c-cyan: #36b7d8;
  --c-teal: #18a999;
  --c-gold: #c5a46d;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --bg-tint: #eaf2fa;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --highlight: #eaf2fa;
  --input-bg: #ffffff;

  /* Text and links */
  --text: #1c2938;
  --text-2: #5d6b7a;
  --text-muted: #5d6b7a;
  --heading: #102a43;
  --link: #245a94;
  --link-hover: #163a63;
  --accent: #245a94;
  --accent-2: #18a999;
  --gold: #c5a46d;
  --on-grad: #ffffff;
  --on-grad-2: #d3e1ee;

  /* Lines */
  --border: #dce5ef;
  --border-strong: #7c8ea3;

  /* Buttons and icon tiles */
  --btn-bg: #245a94;
  --btn-bg-hover: #163a63;
  --btn-text: #ffffff;
  --btn-outline: #245a94;
  --btn-light-bg: #ffffff;
  --btn-light-text: #102a43;
  --tile-bg: #245a94;
  --tile-text: #ffffff;

  /* Chrome */
  --header-bg: #ffffff;
  --bar-bg: #102a43;
  --focus: #245a94;
  --focus-on-dark: #ffffff;
  --footer-text: #eaf1f8;
  --footer-muted: #b9cadb;
  --footer-border: rgba(255, 255, 255, 0.18);

  /* Gradient layers. Gradients cannot fade by themselves, so the light and dark
     versions are stacked and their opacity is switched by the theme. */
  --grad-hero-light: linear-gradient(135deg, #0e2238 0%, #163a63 48%, #245a94 100%);
  --grad-hero-dark: linear-gradient(135deg, #0b1118 0%, #1b3a52 50%, #315d7d 100%);
  --grad-deep-light: linear-gradient(160deg, #102a43 0%, #163a63 100%);
  --grad-deep-dark: linear-gradient(160deg, #111c27 0%, #1f4562 100%);
  --grad-footer-light: linear-gradient(160deg, #163a63 0%, #102a43 55%, #0c2036 100%);
  --grad-footer-dark: linear-gradient(160deg, #2a5473 0%, #1b3a52 55%, #10202e 100%);
  --op-light: 1;
  --op-dark: 0;

  /* Feedback colours */
  --danger-bg: #fbeeee;
  --danger-border: #c98a8a;
  --danger-text: #6e1c1c;
  --danger-solid: #8c1c1c;
  --on-danger: #ffffff;
  --danger-ink: #8c1c1c;
  --success-bg: #eef6f0;
  --success-border: #94b99e;
  --success-text: #1f4d2b;
  --notice-bg: #fff6dc;
  --notice-border: #e3cf8f;
  --notice-text: #5c4a05;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.07);
  --shadow-md: 0 8px 24px rgba(16, 42, 67, 0.09);
  --shadow-lg: 0 22px 50px rgba(8, 20, 40, 0.28);
  --shadow-glow: 0 8px 22px rgba(36, 90, 148, 0.28);

  /* Typography */
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-display: clamp(2.15rem, 1.45rem + 2.9vw, 3.6rem);
  --fs-h1: clamp(1.9rem, 1.45rem + 1.9vw, 2.65rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --fs-h3: 1.2rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-small: 0.9rem;

  /* Spacing */
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --section-pad: clamp(3.25rem, 6.5vw, 5.5rem);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 260ms;
  --theme-duration: 3s; /* how long a light/dark switch takes */
  --theme-ease: ease-in-out;

  /* Layout */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.5rem;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b0f14;
  --bg-alt: #111820;
  --bg-tint: #12202d;
  --surface: #17212c;
  --surface-2: #1d2a38;
  --highlight: #1b2836;
  --input-bg: #0e141b;

  --text: #f1f5f9;
  --text-2: #b0bdca;
  --text-muted: #94a3b5;
  --heading: #f1f5f9;
  --link: #86b2ce;
  --link-hover: #ffffff;
  --accent: #86b2ce;
  --accent-2: #32b8a6;
  --gold: #d6b779;

  --border: #293746;
  --border-strong: #5f7488;

  --btn-bg: #6c9fbe;
  --btn-bg-hover: #86b2ce;
  --btn-text: #0b0f14;
  --btn-outline: #8db5d0;
  --tile-bg: #3f7396;
  --tile-text: #ffffff;

  --header-bg: #0e141b;
  --bar-bg: #070b10;
  --focus: #8db5d0;
  --footer-muted: #b3c3d3;
  --footer-border: rgba(255, 255, 255, 0.16);

  --op-light: 0;
  --op-dark: 1;

  --danger-bg: #3a1b20;
  --danger-border: #7a3a42;
  --danger-text: #f3c5c9;
  --danger-solid: #e58b8b;
  --on-danger: #1a0b0b;
  --danger-ink: #f0a3a3;
  --success-bg: #12301f;
  --success-border: #2f6b45;
  --success-text: #bee3c9;
  --notice-bg: #3a3115;
  --notice-border: #7a6a2a;
  --notice-text: #efdfa2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 8px 22px rgba(108, 159, 190, 0.22);
}