/* Paper Desk — "Exam booklet" design tokens
   Drop this in once, then build components from these variables.
   Values match screens/*.png and screens/*.html exactly. */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Surfaces */
  --pd-paper: #f4f1e8;        /* page ground (also <meta name="theme-color">) */
  --pd-sheet: #faf8f2;        /* cards, dialogs, sheets, inputs-on-page, secondary buttons */
  --pd-desk: #ece8dc;         /* sunken areas, stacked-paper backing, hover wash */
  --pd-rule: #dcd5c4;         /* dividers, control borders */
  --pd-rule-soft: #e7e2d4;
  --pd-ruled-line: #c7d7e1;   /* blue "lined paper" rows + note-field lines */

  /* Ink */
  --pd-ink: #1f1d1a;          /* primary text, primary button, selected states */
  --pd-ink-2: #57534b;        /* secondary text */
  --pd-ink-3: #6f695e;        /* labels, meta, counts (AA on paper, sheet and pen-wash) */
  --pd-ink-hover: #34302a;    /* primary button hover */

  /* Pen colours */
  --pd-pen: #b2422e;                       /* "teacher's red pen": scores, revisit, marks, focus ring */
  --pd-pen-wash: #fbe7df;                  /* revisit toggle background */
  --pd-pen-row: rgba(251, 231, 223, 0.35); /* revisit row tint */
  --pd-pen-line: rgba(178, 66, 46, 0.38);  /* red margin line */
  --pd-pen-border: rgba(178, 66, 46, 0.30);
  --pd-blue: #3967c1;                      /* completed tick */
  --pd-blue-wash: #e7effc;

  /* Type */
  --pd-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --pd-font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pd-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Shape & depth */
  --pd-radius: 3px;           /* buttons, inputs, chips, status boxes */
  --pd-radius-dialog: 4px;
  --pd-radius-sheet: 14px;    /* phone bottom sheets (top corners only) */
  --pd-shadow-sheet: 0 1px 0 rgba(60, 45, 20, 0.06), 0 18px 36px -24px rgba(60, 45, 20, 0.35);
  --pd-shadow-dialog: 0 40px 80px -30px rgba(20, 14, 4, 0.55);
  --pd-shadow-bottom-sheet: 0 -20px 40px -20px rgba(20, 14, 4, 0.4);
  --pd-scrim: rgba(31, 29, 26, 0.42);

  /* Layout */
  --pd-gutter-desktop: 64px;
  --pd-gutter-phone: 16px;
  --pd-sidebar: 232px;
  --pd-sidebar-gap: 56px;
  --pd-list-columns: 92px 20px 56px minmax(0, 1fr) 150px 84px 188px; /* year | status | code | paper | difficulty | score | actions */
  --pd-list-column-gap: 16px;
  --pd-margin-line-x: 92px;   /* red margin line sits on the year gutter's edge */

  /* Faint paper grain for the page background */
  --pd-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Base */
html { background-color: var(--pd-paper); }
body {
  margin: 0;
  background-color: var(--pd-paper);
  background-image: var(--pd-grain);
  color: var(--pd-ink);
  font-family: var(--pd-font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pd-ink); text-decoration-color: var(--pd-rule); text-underline-offset: 3px; }
a:hover { color: var(--pd-pen); text-decoration-color: var(--pd-pen); }
:focus-visible { outline: 2px solid var(--pd-pen); outline-offset: 2px; }
h1, h2, h3, p { text-wrap: pretty; }

/* Mono caps label — used for eyebrows, meta lines, column headers, counts */
.pd-label {
  font-family: var(--pd-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-ink-3);
}

/* Lined-paper background for the check-in note field */
.pd-ruled {
  background-color: var(--pd-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--pd-ruled-line) 27px, var(--pd-ruled-line) 28px);
  background-position: 0 8px;
  line-height: 28px;
}

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