/* shipboard tokens.
   Dark first: a pier at night. Light is chart paper with navy ink, a full theme rather than an inversion.
   Colour roles never mix: lamp (amber) = the brief and the human's brief actions (dispatch, re-run);
   channel (teal) = main, clean, ship; buoy (red) = conflict and failure; moon (blue) = an agent at work;
   slate = parked and neutral. */

:root {
  color-scheme: dark;

  --font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display: clamp(2rem, 1.35rem + 1.5vw, 2.75rem);
  --t-hero: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
  --t-h2: 1.375rem;
  --t-h3: clamp(1.0625rem, 0.95rem + 0.2vw, 1.1875rem);
  --t-lane: 0.90625rem;
  --t-body: 0.875rem;
  --t-small: 0.8125rem;
  --t-micro: 0.75rem;
  --t-label: 0.6875rem;
  --t-mono: clamp(0.78125rem, 0.7rem + 0.1vw, 0.8125rem);

  --r-sm: 6px;
  --r: 10px;
  --r-card: 12px;
  --r-lg: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-hover: 140ms;
  --d-enter: 240ms;
  --d-draw: 420ms;
  --d-move: 560ms;
  --gutter: 24px;
  --feed-w: 276px;
  --topbar-h: 56px;

  --bg: #0A1222;
  --glow: rgba(244, 183, 64, 0.075);
  --glow-2: rgba(166, 190, 255, 0.045);
  --lane: rgba(20, 33, 58, 0.55);
  --lane-line: rgba(150, 175, 220, 0.09);
  --card: #132036;
  --card-2: #1A2943;
  --card-hover: #15233B;
  --sheet: #0F1A2E;
  --input: #0C1628;
  --code: #0C1526;
  --line: rgba(150, 175, 220, 0.14);
  --line-2: rgba(150, 175, 220, 0.24);
  --text: #E8EDF5;
  --text-2: #AAB6CB;
  --text-3: #8592AA;

  --lamp: #F4B740;
  --lamp-fill: #F4B740;
  --lamp-fill-hover: #FFC65A;
  --lamp-ink: #1B1305;
  --lamp-edge: #F4B740;
  --lamp-wash: rgba(244, 183, 64, 0.11);
  --lamp-line: rgba(244, 183, 64, 0.42);
  --lamp-glow: rgba(244, 183, 64, 0.55);

  --channel: #43CDB9;
  --channel-fill: #43CDB9;
  --channel-fill-hover: #5DDCC9;
  --channel-ink: #04201C;
  --channel-wash: rgba(67, 205, 185, 0.10);
  --channel-line: rgba(67, 205, 185, 0.38);
  --channel-glow: rgba(67, 205, 185, 0.5);

  --buoy: #FF8A80;
  --buoy-wash: rgba(255, 138, 128, 0.10);
  --buoy-line: rgba(255, 138, 128, 0.42);

  --moon: #A6BEFF;
  --moon-wash: rgba(166, 190, 255, 0.10);
  --moon-line: rgba(166, 190, 255, 0.36);

  --slate: #97A3BA;
  --slate-wash: rgba(151, 163, 186, 0.10);

  --focus: #F4B740;
  --scrim: rgba(3, 7, 15, 0.62);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 10px 24px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(150, 175, 220, 0.12);
  --shadow-sheet: -30px 0 80px -30px rgba(0, 0, 0, 0.6);

  --diff-add: rgba(67, 205, 185, 0.12);
  --diff-del: rgba(255, 138, 128, 0.12);
  --diff-hunk: rgba(166, 190, 255, 0.07);

  --flag-red: #D8423A;
  --flag-blue: #2B5CD2;
  --flag-yellow: #F3C53A;
  --flag-white: #F4F1E8;
  --flag-edge: rgba(255, 255, 255, 0.22);

  --preview-paper: #E7EEF0;

  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='240' fill='none' stroke='rgba(166,190,255,0.075)' stroke-width='1'%3E%3Cpath d='M0 214C150 184 262 230 424 200S712 150 980 182'/%3E%3Cpath d='M0 182C142 152 282 200 434 170S700 118 980 146'/%3E%3Cpath d='M0 148C160 124 292 164 444 138S708 88 980 110'/%3E%3Cpath d='M0 116C172 98 302 128 454 106S716 58 980 76'/%3E%3Cpath d='M0 84C182 70 312 94 464 76S724 32 980 46'/%3E%3Cpath d='M0 52C190 42 320 62 474 48S730 8 980 18'/%3E%3Cpath d='M520 240c40-30 120-40 180-22s120 10 160-12' stroke-dasharray='2 5'/%3E%3C/svg%3E");
}

/* The light set appears twice: once for "auto" when the OS prefers light, once for an explicit choice. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F1EFE8;
    --glow: rgba(233, 166, 55, 0.13);
    --glow-2: rgba(47, 82, 184, 0.05);
    --lane: rgba(222, 218, 205, 0.55);
    --lane-line: rgba(13, 26, 44, 0.07);
    --card: #FFFFFF;
    --card-2: #F6F4EE;
    --card-hover: #FFFEFB;
    --sheet: #FBFAF7;
    --input: #FFFFFF;
    --code: #F6F4EE;
    --line: rgba(13, 26, 44, 0.11);
    --line-2: rgba(13, 26, 44, 0.21);
    --text: #0D1A2C;
    --text-2: #46536A;
    --text-3: #56627A;
    --lamp: #875000;
    --lamp-fill: #E9A637;
    --lamp-fill-hover: #F2B24C;
    --lamp-ink: #1B1305;
    --lamp-edge: #875000;
    --lamp-wash: rgba(233, 166, 55, 0.15);
    --lamp-line: rgba(135, 80, 0, 0.36);
    --lamp-glow: rgba(233, 166, 55, 0.45);
    --channel: #086A5F;
    --channel-fill: #086A5F;
    --channel-fill-hover: #0B7B6E;
    --channel-ink: #FFFFFF;
    --channel-wash: rgba(8, 106, 95, 0.08);
    --channel-line: rgba(8, 106, 95, 0.34);
    --channel-glow: rgba(8, 106, 95, 0.35);
    --buoy: #AE3329;
    --buoy-wash: rgba(174, 51, 41, 0.07);
    --buoy-line: rgba(174, 51, 41, 0.32);
    --moon: #2F52B8;
    --moon-wash: rgba(47, 82, 184, 0.07);
    --moon-line: rgba(47, 82, 184, 0.3);
    --slate: #566276;
    --slate-wash: rgba(86, 98, 118, 0.08);
    --focus: #875000;
    --scrim: rgba(13, 26, 44, 0.32);
    --shadow-card: 0 1px 2px rgba(13, 26, 44, 0.05), 0 10px 22px -16px rgba(13, 26, 44, 0.28);
    --shadow-pop: 0 24px 60px -20px rgba(13, 26, 44, 0.35), 0 0 0 1px rgba(13, 26, 44, 0.1);
    --shadow-sheet: -30px 0 80px -30px rgba(13, 26, 44, 0.35);
    --diff-add: rgba(8, 106, 95, 0.09);
    --diff-del: rgba(174, 51, 41, 0.08);
    --diff-hunk: rgba(47, 82, 184, 0.06);
    --flag-edge: rgba(13, 26, 44, 0.28);
    --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='240' fill='none' stroke='rgba(13,26,44,0.075)' stroke-width='1'%3E%3Cpath d='M0 214C150 184 262 230 424 200S712 150 980 182'/%3E%3Cpath d='M0 182C142 152 282 200 434 170S700 118 980 146'/%3E%3Cpath d='M0 148C160 124 292 164 444 138S708 88 980 110'/%3E%3Cpath d='M0 116C172 98 302 128 454 106S716 58 980 76'/%3E%3Cpath d='M0 84C182 70 312 94 464 76S724 32 980 46'/%3E%3Cpath d='M0 52C190 42 320 62 474 48S730 8 980 18'/%3E%3Cpath d='M520 240c40-30 120-40 180-22s120 10 160-12' stroke-dasharray='2 5'/%3E%3C/svg%3E");
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F1EFE8;
  --glow: rgba(233, 166, 55, 0.13);
  --glow-2: rgba(47, 82, 184, 0.05);
  --lane: rgba(222, 218, 205, 0.55);
  --lane-line: rgba(13, 26, 44, 0.07);
  --card: #FFFFFF;
  --card-2: #F6F4EE;
  --card-hover: #FFFEFB;
  --sheet: #FBFAF7;
  --input: #FFFFFF;
  --code: #F6F4EE;
  --line: rgba(13, 26, 44, 0.11);
  --line-2: rgba(13, 26, 44, 0.21);
  --text: #0D1A2C;
  --text-2: #46536A;
  --text-3: #56627A;
  --lamp: #875000;
  --lamp-fill: #E9A637;
  --lamp-fill-hover: #F2B24C;
  --lamp-ink: #1B1305;
  --lamp-edge: #875000;
  --lamp-wash: rgba(233, 166, 55, 0.15);
  --lamp-line: rgba(135, 80, 0, 0.36);
  --lamp-glow: rgba(233, 166, 55, 0.45);
  --channel: #086A5F;
  --channel-fill: #086A5F;
  --channel-fill-hover: #0B7B6E;
  --channel-ink: #FFFFFF;
  --channel-wash: rgba(8, 106, 95, 0.08);
  --channel-line: rgba(8, 106, 95, 0.34);
  --channel-glow: rgba(8, 106, 95, 0.35);
  --buoy: #AE3329;
  --buoy-wash: rgba(174, 51, 41, 0.07);
  --buoy-line: rgba(174, 51, 41, 0.32);
  --moon: #2F52B8;
  --moon-wash: rgba(47, 82, 184, 0.07);
  --moon-line: rgba(47, 82, 184, 0.3);
  --slate: #566276;
  --slate-wash: rgba(86, 98, 118, 0.08);
  --focus: #875000;
  --scrim: rgba(13, 26, 44, 0.32);
  --shadow-card: 0 1px 2px rgba(13, 26, 44, 0.05), 0 10px 22px -16px rgba(13, 26, 44, 0.28);
  --shadow-pop: 0 24px 60px -20px rgba(13, 26, 44, 0.35), 0 0 0 1px rgba(13, 26, 44, 0.1);
  --shadow-sheet: -30px 0 80px -30px rgba(13, 26, 44, 0.35);
  --diff-add: rgba(8, 106, 95, 0.09);
  --diff-del: rgba(174, 51, 41, 0.08);
  --diff-hunk: rgba(47, 82, 184, 0.06);
  --flag-edge: rgba(13, 26, 44, 0.28);
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='240' fill='none' stroke='rgba(13,26,44,0.075)' stroke-width='1'%3E%3Cpath d='M0 214C150 184 262 230 424 200S712 150 980 182'/%3E%3Cpath d='M0 182C142 152 282 200 434 170S700 118 980 146'/%3E%3Cpath d='M0 148C160 124 292 164 444 138S708 88 980 110'/%3E%3Cpath d='M0 116C172 98 302 128 454 106S716 58 980 76'/%3E%3Cpath d='M0 84C182 70 312 94 464 76S724 32 980 46'/%3E%3Cpath d='M0 52C190 42 320 62 474 48S730 8 980 18'/%3E%3Cpath d='M520 240c40-30 120-40 180-22s120 10 160-12' stroke-dasharray='2 5'/%3E%3C/svg%3E");
}

@media (max-width: 719px) {
  :root { --gutter: 16px; --topbar-h: 52px; }
}

/* Tone map: lanes, cards and pills set --tc (text and line), --tw (wash) and --tl (line). */
[data-tone="buoy"] { --tc: var(--buoy); --tw: var(--buoy-wash); --tl: var(--buoy-line); }
[data-tone="channel"] { --tc: var(--channel); --tw: var(--channel-wash); --tl: var(--channel-line); }
[data-tone="lamp"] { --tc: var(--lamp); --tw: var(--lamp-wash); --tl: var(--lamp-line); }
[data-tone="moon"] { --tc: var(--moon); --tw: var(--moon-wash); --tl: var(--moon-line); }
[data-tone="slate"] { --tc: var(--slate); --tw: var(--slate-wash); --tl: var(--line-2); }