/* Design tokens. Light comes from the approved mockups; dark from the
   original page. Dark applies under prefers-color-scheme unless the user
   forced light, and always when the user forced dark (data-theme). */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'), url('../fonts/IBMPlexSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'), url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'), url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); }

:root {
  --ground: #F3F4F6;
  --surface: #FFFFFF;
  --text: #111827;
  --muted: #4B5563;
  --line: #D9DDE3;
  /* The grabber on a sheet: 3:1 against --surface (a hairline colour is not enough to see). */
  --handle: #8B93A1;
  --accent: #2447D6;
  --accent-tint: #E8EDFD;
  --on-accent: #FFFFFF;

  /* Status pills: background / text. Never the only carrier of status:
     every pill and pin state also has a label or shape. */
  --st-saved-bg: #E9ECF0;     --st-saved-fg: #374151;
  --st-drafting-bg: #E8EDFD;  --st-drafting-fg: #1B36A8;
  --st-submitted-bg: #ECE7FB; --st-submitted-fg: #4A2FA8;
  --st-accepted-bg: #E1F4E8;  --st-accepted-fg: #0F6B3F;
  --st-waitlisted-bg: #FFF1D6; --st-waitlisted-fg: #8A4B00;
  --st-rejected-bg: #FBE9E7;  --st-rejected-fg: #A3231A;

  /* Pin fills. "Not saved" is a hollow ring in the text color. */
  --pin-saved: #6B7280;
  --pin-drafting: #2447D6;
  --pin-submitted: #5B3FC8;
  --pin-accepted: #1F8F57;

  /* Deadline urgency (text). */
  --urgent: #A3231A;
  --soon: #8A4B00;

  --shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 4px 16px rgba(17, 24, 39, .08);
  /* For things that sit in a scroller, where a wide blur would be clipped. */
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, .18);
  --radius: 10px;
  --topbar-h: 52px;
  --tabbar-h: 58px;
  /* The tab bar with the home-indicator inset under it (0 where there is none).
     Everything that has to clear the bar uses this, so none can forget the inset. */
  --tabbar-total: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  --panel-w: 420px;
  /* The deadline runway along the bottom of a wide screen: its toggle is a 44 px
     target, and the panel above it stops where the runway starts. */
  --runway-h: 114px;
  --runway-collapsed-h: 44px;
  /* The phone sheet's smallest height: the 44 px handle zone, the search box
     and one line of summary. js/lib/panel.js reads it too. */
  --sheet-peek: 120px;
  /* iOS Safari zooms the page when a field under 16px takes focus. Fields use
     this size below the desktop breakpoint (shell.css). */
  --fs-input: 16px;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A phone on its side: 375 to 430 px of height, so the bars shrink and the sheet's
   smallest size is just the handle and the search box. Peek and half would
   otherwise be almost the same height. */
@media (max-width: 899px) and (max-height: 500px) {
  :root { --topbar-h: 44px; --tabbar-h: 44px; --sheet-peek: 88px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a0e17;
    --surface: #10151f;
    --text: #e2e8f0;
    --muted: #8b96a8;
    --line: #1f2a3d;
    --handle: #64748b;
    --accent: #38bdf8;
    --accent-tint: #12263a;
    --on-accent: #06202e;
    --st-saved-bg: #1b2434;     --st-saved-fg: #c3ccda;
    --st-drafting-bg: #12263a;  --st-drafting-fg: #7cc8f5;
    --st-submitted-bg: #231c3d; --st-submitted-fg: #b7a5f5;
    --st-accepted-bg: #0f2a1d;  --st-accepted-fg: #6fd6a0;
    --st-waitlisted-bg: #35270f; --st-waitlisted-fg: #f0c066;
    --st-rejected-bg: #3a1a17;  --st-rejected-fg: #f29a92;
    --pin-saved: #9aa5b8;
    --pin-drafting: #38bdf8;
    --pin-submitted: #a48cf5;
    --pin-accepted: #4cc88a;
    --urgent: #f29a92;
    --soon: #f0c066;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --ground: #0a0e17;
  --surface: #10151f;
  --text: #e2e8f0;
  --muted: #8b96a8;
  --line: #1f2a3d;
  --handle: #64748b;
  --accent: #38bdf8;
  --accent-tint: #12263a;
  --on-accent: #06202e;
  --st-saved-bg: #1b2434;     --st-saved-fg: #c3ccda;
  --st-drafting-bg: #12263a;  --st-drafting-fg: #7cc8f5;
  --st-submitted-bg: #231c3d; --st-submitted-fg: #b7a5f5;
  --st-accepted-bg: #0f2a1d;  --st-accepted-fg: #6fd6a0;
  --st-waitlisted-bg: #35270f; --st-waitlisted-fg: #f0c066;
  --st-rejected-bg: #3a1a17;  --st-rejected-fg: #f29a92;
  --pin-saved: #9aa5b8;
  --pin-drafting: #38bdf8;
  --pin-submitted: #a48cf5;
  --pin-accepted: #4cc88a;
  --urgent: #f29a92;
  --soon: #f0c066;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}