@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:wght@600;700&display=swap");

:root {
  --font-sans: "Inter", Arial, Helvetica, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-condensed: "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-icons: "Font Awesome 6 Pro";

  --color-night: #050608;
  --color-off-white: #f5f4f0;
  --color-cool-gray: #9aa0aa;
  --color-charcoal-border: #23262d;
  --color-coral: #ff5a5f;
  --color-navy: #123253;
  --color-navy-deep: #0b2136;
  --color-navy-dark: #071c32;
  --color-navy-shadow: #0a2136;
  --color-navy-midnight: #061d35;
  --color-navy-slate: #0f2c47;
  --color-navy-light: #183c61;
  --color-navy-services: #1c4266;
  --color-blue-gray: #7895a7;
  --color-blue: #0066ff;
  --color-blue-light: #b7c9e2;
  --color-blue-violet: #7c8cff;
  --color-teal: #3ac7a2;
  --color-slate: #555a63;
  --color-gray-soft: #8a8d94;
  --color-gray-warm: #a9b7c6;
  --color-gray-panel: #f4f4f1;
  --color-gray-panel-light: #f5f5f3;
  --color-gray-panel-lighter: #f6f6f4;
  --color-gray-panel-line: #deded9;
  --color-gray-panel-line-dark: #dcdcd7;
  --color-gray-panel-border: #e3e3e0;
  --color-gray-hover: #f0f0ed;
  --color-gray-empty: #ddd;
  --color-gray-timeline: #15171c;
  --color-gray-blue: #4a4d55;

  --color-black: #000;
  --color-near-black: #0b0b0b;
  --color-gray-950: #0f0f0f;
  --color-gray-900: #111;
  --color-gray-850: #1e1e1e;
  --color-gray-800: #212121;
  --color-gray-750: #222;
  --color-gray-700: #272727;
  --color-gray-650: #313131;
  --color-gray-600: #323334;
  --color-gray-550: #4c4c4c;
  --color-gray-500: #545454;
  --color-gray-450: #666;
  --color-gray-400: #777;
  --color-gray-350: #999;
  --color-gray-300: #9d9d9d;
  --color-gray-250: #bcbcbc;
  --color-gray-225: #bdbdbd;
  --color-gray-200: #c9c9c9;
  --color-gray-175: #d7d9dd;
  --color-gray-150: #d9d9d9;
  --color-gray-125: #e2e2e2;
  --color-gray-100: #eee;
  --color-gray-50: #f1f1f1;
  --color-lavender-gray: #f3f1f6;
  --color-surface: #f9f9f9;
  --color-gray: #f5f5f5;

  --color-cream: #f7f2e8;
  --color-cream-light: #f8f2e8;
  --color-sand: #d9d3c9;
  --color-sand-light: #d8d3ca;
  --color-stone: #c9c2b4;
  --color-sage: #c1d6cb;
  --color-green: #3f7855;
  --color-green-deep: #063f35;
  --color-green-bright: #2f8a4b;
  --color-green-accent: #45c17d;
  --color-red: #d64545;
  --color-red-deep: #d82221;

  --color-white: #fff;
  --color-white-15: rgba(255, 255, 255, .15);
  --color-white-14: rgba(255, 255, 255, .14);
  --color-white-10: rgba(255, 255, 255, .1);
  --color-white-20: rgba(255, 255, 255, .2);
  --color-white-50: rgba(255, 255, 255, .5);
  --color-white-04: rgba(255, 255, 255, .04);
  --color-gray-500-10: rgba(84, 84, 84, .1);
  --color-gray-500-20: rgba(84, 84, 84, .2);
  --color-gray-500-30: rgba(84, 84, 84, .3);
  --color-gray-500-50: rgba(84, 84, 84, .5);
  --color-black-60: rgba(0, 0, 0, .6);
  --color-black-70: rgba(0, 0, 0, .7);
  --color-gray-950-35: rgba(15, 15, 15, .35);
  --color-gray-950-45: rgba(15, 15, 15, .45);
  --color-white-92: rgba(255, 255, 255, .92);
  --color-coral-80: rgba(255, 90, 95, .8);
  --color-chart-grid: #ecece8;
  --color-work-paper: #f7f4ec;
  --color-work-paper-dim: #efeadc;
  --color-work-ink: #14231c;
  --color-work-ink-dim: #5b6b60;
  --color-work-line: rgba(20, 35, 28, .12);
  --color-work-accent: #e7a73e;
  --color-work-teal: #2f6f62;
  --color-work-rust: #c1442e;
  --color-work-paper-86: rgba(247, 244, 236, .86);
  --color-work-overlay: rgba(20, 35, 28, .85);
  --color-work-overlay-soft: rgba(247, 244, 236, .14);
  --color-work-paper-70: rgba(247, 244, 236, .7);

  --theme-home-bg: var(--color-night);
  --theme-home-ink: var(--color-off-white);
  --theme-home-muted: var(--color-cool-gray);
  --theme-home-line: var(--color-charcoal-border);
  --theme-cream: var(--color-cream);
  --theme-cream-light: var(--color-cream-light);
  --theme-black: var(--color-black);
  --theme-white: var(--color-white);
  --theme-text: var(--color-gray-900);
  --theme-muted: var(--color-gray-400);
  --theme-line: var(--color-sand);
  --theme-green: var(--color-green);
  --theme-green-deep: var(--color-green-deep);
  --theme-navy: var(--color-navy);
  --theme-navy-deep: var(--color-navy-deep);
  --theme-services-navy: var(--color-navy-services);
  --theme-services-navy-deep: var(--color-navy-dark);
  --theme-panel: var(--color-cream-light);
}