/*
 * tokens.css — Fair Copy design tokens and base styles.
 *
 * Layout concept: one sheet of ruled paper per screen, drawn to scale
 * (college ruling, 7.1 mm). Chrome is two quiet hairline rows. The identity
 * sits in the Written | Typed switch, each label set in its own medium, and
 * in the reminder flags that live in the paper's margin.
 *
 * Every color is a token. Components never use a literal color.
 */
:root {
  /* surfaces */
  --desk: #ECEFF3;            /* behind the sheet */
  --chrome: #F7F9FB;          /* bars, side list, panel */
  --raised: #FFFFFF;          /* dialogs, popovers, cards */
  --paper: #FEFEFC;           /* the sheet */
  --track: #E1E6ED;           /* wells: inputs, switch track */
  --hover: #E9EDF2;
  --thumb: #FFFFFF;           /* the chosen option of a segmented control */
  --thumb-ring: transparent;
  /* white paper in either theme, never redefined: under pictures of handwriting,
     whose ink has the fixed colors for white paper */
  --sheet-print: #FEFEFC;

  /* stationery */
  --feint: #C3D7E7;           /* horizontal rules */
  --margin-rule: #E7909F;     /* vertical margin rule */

  /* text */
  --text: #161D2B;
  --text-2: #4F596B;
  --text-3: #667083;
  --hairline: #DDE2E9;
  --hairline-strong: #C5CCD6;

  /* ink and accent */
  --ink: #1B2A4E;             /* primary buttons, active switch */
  --on-ink: #FEFEFC;
  --accent: #274C9B;          /* links, focus, selection */
  --accent-wash: #E3EAF6;
  --band: rgba(39, 76, 155, 0.10);
  --selection: rgba(39, 76, 155, 0.20);

  /* states */
  --overdue: #C02A48;
  --overdue-wash: #FBE8EC;
  --today: #8F5E00;
  --today-wash: #FBF1D9;
  --upcoming: #2B6CA3;
  --upcoming-wash: #E4EFF8;
  --ok: #1E7553;
  --ok-wash: #E2F3EB;
  --marker: rgba(255, 214, 51, 0.50);   /* text highlight */

  /* depth */
  --scrim: rgba(18, 24, 38, 0.38);
  --shadow-paper: 0 0 0 1px rgba(22, 29, 43, 0.06), 0 1px 2px rgba(22, 29, 43, 0.06), 0 18px 40px -24px rgba(22, 29, 43, 0.28);
  --shadow-float: 0 0 0 1px rgba(22, 29, 43, 0.08), 0 10px 30px -8px rgba(22, 29, 43, 0.30);
  --shadow-thumb: 0 1px 3px rgba(22, 29, 43, 0.30);

  /* type */
  --font-display: "Besley", "Clarendon", "Rockwell", Georgia, serif;
  --font-body: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --font-util: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;

  /* type scale */
  --fs-micro: 11px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-read: 17px;            /* typed notes */
  --fs-title: 19px;
  --fs-head: 26px;

  /* shape and rhythm */
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 16px;
  --tap: 44px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #0C0F13; --chrome: #14181E; --raised: #1D222B; --paper: #181D25; --track: #222934; --hover: #1E242D;
    --thumb: #2E3643; --thumb-ring: #9DB8F2;
    --feint: #2B3C4F; --margin-rule: #74394A;
    --text: #E8ECF3; --text-2: #A7B0C0; --text-3: #8793A7; --hairline: #242B35; --hairline-strong: #36404E;
    --ink: #E3E8F2; --on-ink: #12161D; --accent: #9DB8F2; --accent-wash: #1C2942;
    --band: rgba(157, 184, 242, 0.12); --selection: rgba(157, 184, 242, 0.30);
    --overdue: #FF8296; --overdue-wash: #3A1922; --today: #EDBB4C; --today-wash: #32280E;
    --upcoming: #7EB6EA; --upcoming-wash: #13283B; --ok: #74D3A6; --ok-wash: #12301F;
    --marker: rgba(255, 214, 51, 0.26);
    --scrim: rgba(0, 0, 0, 0.58);
    --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.80);
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px -6px rgba(0, 0, 0, 0.70);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.50);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #0C0F13; --chrome: #14181E; --raised: #1D222B; --paper: #181D25; --track: #222934; --hover: #1E242D;
  --thumb: #2E3643; --thumb-ring: #9DB8F2;
  --feint: #2B3C4F; --margin-rule: #74394A;
  --text: #E8ECF3; --text-2: #A7B0C0; --text-3: #8793A7; --hairline: #242B35; --hairline-strong: #36404E;
  --ink: #E3E8F2; --on-ink: #12161D; --accent: #9DB8F2; --accent-wash: #1C2942;
  --band: rgba(157, 184, 242, 0.12); --selection: rgba(157, 184, 242, 0.30);
  --overdue: #FF8296; --overdue-wash: #3A1922; --today: #EDBB4C; --today-wash: #32280E;
  --upcoming: #7EB6EA; --upcoming-wash: #13283B; --ok: #74D3A6; --ok-wash: #12301F;
  --marker: rgba(255, 214, 51, 0.26);
  --scrim: rgba(0, 0, 0, 0.58);
  --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.80);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px -6px rgba(0, 0, 0, 0.70);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.50);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------ base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: var(--desk);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;            /* the app is one screen; its parts scroll */
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--accent); }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--selection); }

.nb-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* utility type roles */
.nb-util { font-family: var(--font-util); font-size: 12px; line-height: 1.3; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nb-eyebrow { font: 500 var(--fs-micro)/1 var(--font-util); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.nb-display { font-family: var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}