/* Homer Post's tokens (every component reads these names). The page is an airmail envelope: warm paper, navy ink (the
   first logo's navy, kept), and airmail red as the one action and the postmark. Gold is always a token and Homer's bill;
   teal is always SOL. Navy bands carry custody and the footer.
   Contrast: white on red #D63A28 is 4.7:1; navy ink on paper is 13:1; --muted on paper is 5.3:1. */
/* the fonts live on Homer's own server (web/fonts, Latin, variable): no third party sees a visit, nothing to block */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/figtree-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* the brand */
  --navy: #14265C;          /* ink, and the custody band */
  --navy-2: #0D1A45;        /* the footer */
  --navy-hi: #1C3272;
  --red: #D63A28;           /* airmail red: the one action, the stamp, the postmark */
  --red-2: #BF2F1F;
  --red-wash: #FBE6E1;
  --gold: #F6C343;          /* a token; Homer's bill */
  --gold-2: #E2A626;
  --teal: #2CC9C4;          /* SOL, in the art */
  --blue: #14265C;          /* old names, still read by a few components */
  --blue-field: #14265C;
  --cream: #FCF8EE;

  /* the airmail edge: red, paper, navy, paper, on a 45 degree slant */
  --stripe: repeating-linear-gradient(-45deg, var(--red) 0 16px, transparent 16px 24px, var(--navy) 24px 40px, transparent 40px 48px);

  /* light surfaces (the default) */
  --page: #F4EEE2;
  --bg: #F4EEE2;
  --bg-2: #EBE3D3;          /* wells, tracks, table heads */
  --surface: #FFFDF8;       /* letter paper */
  --surface-2: #FBF6EC;
  --surface-3: #EFE7D7;
  --line: #E3D9C6;
  --line-2: #D2C5AA;
  --line-3: #B6A684;
  --border: 1px solid var(--line);
  --ink: #14265C;
  --ink-2: #3A4770;
  --muted: #5C6585;
  --accent: #D63A28;
  --accent-2: #BF2F1F;
  --accent-wash: #FBE6E1;
  --on-accent: #FFFFFF;
  --good: #0B7A54;
  --good-wash: #E2F4EC;
  --bad: #A61E2B;
  --bad-wash: #FBE8E8;
  --warn: #8F5600;
  --warn-wash: #FFF2D6;

  --font-display: 'Archivo', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.025em;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-btn: 10px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(20, 38, 92, 0.07), 0 1px 2px rgba(20, 38, 92, 0.05);
  --shadow: 0 1px 0 rgba(20, 38, 92, 0.06), 0 14px 30px -16px rgba(20, 38, 92, 0.28);
  --shadow-lg: 0 2px 0 rgba(20, 38, 92, 0.06), 0 30px 60px -26px rgba(13, 26, 69, 0.42);

  --t-fast: 160ms;
  --t: 320ms;
  --t-slow: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-stamp: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* the navy scope: the custody band and the footer. Components read the same names. */
.on-navy {
  color-scheme: dark;
  --bg: #14265C;
  --bg-2: rgba(255, 255, 255, 0.07);
  --surface: #1A2F6B;
  --surface-2: #1F3678;
  --surface-3: #263F86;
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.22);
  --line-3: rgba(255, 255, 255, 0.36);
  --ink: #FFFFFF;
  --ink-2: #DCE2F3;
  --muted: #B4BEDD;
  --accent: #FF6B57;
  --accent-2: #FF8676;
  --accent-wash: rgba(255, 107, 87, 0.14);
  --on-accent: #0D1A45;
  --good: #6EE3B5;
  --good-wash: rgba(110, 227, 181, 0.12);
  --bad: #FF9AA5;
  --bad-wash: rgba(255, 154, 165, 0.12);
  --warn: #FFD27A;
  --warn-wash: rgba(255, 210, 122, 0.12);
  color: var(--ink);
}

/* kept for components that still ask for it: a navy field with white type */
.on-blue {
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --muted: #DCE2F3;
  --line: rgba(255, 255, 255, 0.22);
  --line-2: rgba(255, 255, 255, 0.34);
  --line-3: rgba(255, 255, 255, 0.5);
  --pill: rgba(255, 255, 255, 0.1);
  --accent: #FF6B57;
  --accent-2: #FF8676;
  --on-accent: #0D1A45;
  color: var(--ink);
}

/* letter-paper cards inside a navy band go back to the light tokens */
.on-blue .ticket, .on-blue .panel, .on-navy .ticket, .on-navy .letter {
  --surface: #FFFDF8;
  --surface-2: #FBF6EC;
  --bg-2: #EBE3D3;
  --ink: #14265C;
  --ink-2: #3A4770;
  --muted: #5C6585;
  --line: #E3D9C6;
  --line-2: #D2C5AA;
  --line-3: #B6A684;
  --accent: #D63A28;
  --accent-2: #BF2F1F;
  --accent-wash: #FBE6E1;
  --on-accent: #FFFFFF;
  --good: #0B7A54;
  --good-wash: #E2F4EC;
  color: var(--ink);
}