/* Reading Room tokens — PLAN-HOMEPAGE-2026-09 §3.
 *
 * Everything is scoped to `.rr`, so a page opts in by putting that class
 * on its wrapper and nothing outside it changes. The rest of the site
 * keeps the design-system tokens (Inter, --color-*).
 *
 * Contrast, computed (WCAG 2.1 relative luminance) against the darkest
 * ground text sits on, --rr-paper-sunken (#EFE9DD), so every other paper is
 * better. AA needs 4.5:1 for body text, 3:1 for large text and UI marks.
 * tests/test_home_rr_foundation.py recomputes these; change a colour and
 * the test tells you if it still passes.
 *   --rr-ink      #1B1A17  14.4:1   body, headings, solid chip ground
 *   --rr-ink-2    #3A3630   9.9:1   supporting text, kickers
 *   --rr-ink-3    #5C574E   5.9:1   meta (source, date, counts) — the floor;
 *                                   nothing lighter carries text
 *   --rr-accent   #1F4D3F   7.9:1   links; paper on it (button) is 8.6:1
 *   --rr-type-*   3.9:1 to 6.9:1    the 8px dot ONLY (a UI mark, 3:1).
 *                                   --rr-type-guideline is 3.9:1, so a type
 *                                   colour is never a text colour; the label
 *                                   beside the dot is --rr-ink-2.
 *   --rr-highlight under --rr-ink is 13.5:1. It is a ground, never text.
 *   --rr-rule / -strong / -soft and --rr-thumb are borders and fills only.
 */
.rr {
  /* paper */
  --rr-paper: #F6F2EA;
  --rr-paper-raised: #FBF9F4;
  --rr-paper-sunken: #EFE9DD;
  --rr-thumb: #DDD5C4;              /* media placeholder before the image loads */

  /* ink */
  --rr-ink: #1B1A17;
  --rr-ink-2: #3A3630;
  --rr-ink-3: #5C574E;

  /* rules — borders only */
  --rr-rule: #D9D2C3;               /* card edges, row dividers */
  --rr-rule-strong: #C9C1B0;        /* control borders: pills, round buttons */
  --rr-rule-soft: #E4DDCE;          /* dividers inside a card */

  --rr-accent: #1F4D3F;
  --rr-highlight: #F3E2A6;

  /* statement types — the dot, one hue per kind of claim */
  --rr-type-guideline: #9A6A00;
  --rr-type-research: #1D4E89;
  --rr-type-established: #1F4D3F;
  --rr-type-opinion: #6B3F7A;
  --rr-type-open: #9B2C2C;

  /* three radii, and only three — plus the one exception the plan names:
     the dark band's outer corner (§4: "logo plates 10px, dark band 24px") */
  --rr-radius-pill: 999px;
  --rr-radius-card: 16px;
  --rr-radius-media: 12px;
  --rr-radius-band: 24px;
  --rr-radius-none: 0;              /* an explicit reset, for rules that undo a radius */
  /* PLAN-AUTHOR-ONBOARDING-2026-10 §8 — the library's marks, and only those:
     a rubber stamp's corner and the received-stamp red. Stamps only. */
  --rr-radius-stamp: 3px;
  --rr-stamp-received: #A23B2A;

  --rr-font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --rr-font-body: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --rr-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rr-tap: 44px;                   /* minimum touch target */

  /* the author's entrance (rooms.css): the lamps, and the paper of the
     night room — fixed, so the backdrop keeps its colour while it fades */
  --rr-lamp: #F3E2A6;
  /* the mark's gold band: drawer pulls, nameplates, one shelf book in
     seven (SPEC-ONBOARDING-MOTION-2026-10) */
  --rr-gold: #D99A20;
  --rr-night-paper: #1A1814;
  --rr-night-shadow: rgba(0, 0, 0, .55);
  --rr-on-vivid: #FBF9F4;           /* words on the violet pill, both themes */
}

/* The reading room at night (Ramy 2026-10-02): the one dark room on the
   author's entrance. rooms.js puts .is-night on the shell at station 5, so
   every token below it — the hall, the cart, the letter, the buttons — reads
   as ink on midnight. Ink-3 on this paper is 5.6:1; the accent 6.9:1. */
.rr .is-night, .rr.is-night {
  --rr-paper: #1A1814;
  --rr-paper-raised: #24221D;
  --rr-paper-sunken: #11100C;
  --rr-thumb: #2E2B25;
  --rr-ink: #EAE6DF;
  --rr-ink-2: #B5B0A5;
  --rr-ink-3: #8E897E;
  --rr-rule: #3D3930;
  --rr-rule-strong: #4A463D;
  --rr-rule-soft: #2E2B25;
  --rr-accent: #5FB296;
  --rr-highlight: #FFE58F;
  --rr-lamp: #FFE58F;
  --rr-gold: #E0A93A;
  --rr-type-guideline: #C49B3A;
  --rr-type-research: #7FA6D6;
  --rr-type-established: #5FB296;
  --rr-type-opinion: #B58BC4;
  --rr-type-open: #D9705C;
  --rr-stamp-received: #D9705C;
}


/* ── The site-wide flip — PLAN-DESIGN-ROLLOUT-2026-09 Layer 1 ──────────────
 *
 * Under `html.rr-theme` the design system's EXISTING token names resolve to
 * Reading Room values, so every page that already uses tokens changes at once
 * with no template edit. Switched by RR_THEME (Secrets Manager env), or
 * `?theme=rr` for a signed-in admin; see gcmd_library/shared/reading_room.py.
 * Flag off, nothing here applies and the site is byte-for-byte what it was.
 *
 * Why `rr-theme` and not `rr`, as the plan first wrote: `.rr` is already the
 * homepage's COMPONENT scope — 32 descendant rules in pages/home-rr.css, such
 * as `.rr a { color: inherit }` and `.rr .askbar .askbar-field`. On <html>
 * those would restyle every link and every ask bar on the site. This class
 * carries tokens only.
 *
 * Values are LITERALS, repeating the `.rr` block above rather than reading it
 * through var(--rr-*): the `.rr` block stays byte-for-byte as it was, because
 * the live newsletter parses it with a literal `.rr {` search
 * (newsletter/render.py palette()). tests/test_design_tokens.py pins every
 * value here that has a `.rr` twin to that twin, so the two cannot drift.
 *
 * Specificity: `html.rr-theme` is (0,1,1) and beats `:root` (0,1,0) whatever
 * the load order — which matters because content_watch.html still declares
 * these same names in its own inline `:root` palette.
 *
 * Contrast on paper #F6F2EA (tests/test_design_tokens.py recomputes it):
 * every text token is 4.5:1 or better, and paper text on every filled colour
 * is too. Two deliberate exceptions: --color-gray-400 (2.98:1) is the
 * placeholder/disabled tone — today's #A8A29E on white is 2.52:1 — and
 * --color-type-guideline (4.24:1) is the homepage's gold, a dot colour, never
 * text.
 */
html.rr-theme {
  /* ground and ink */
  --color-gray-50:  #F6F2EA;          /* the page (body background) */
  --color-gray-100: #EFE9DD;
  --color-gray-200: #E4DDCE;
  --color-gray-300: #D9D2C3;
  --color-gray-400: #948C7C;                  /* placeholder / disabled only */
  --color-gray-500: #5C574E;
  --color-gray-600: #3A3630;
  --color-gray-700: #3A3630;
  --color-gray-800: #2A2622;
  --color-gray-900: #1B1A17;
  --color-gray-950: #1B1A17;
  --color-white:           #FBF9F4;  /* card ground; paper text on ink */
  --color-surface:         #FBF9F4;
  --color-surface-raised:  #FBF9F4;
  --color-surface-sunken:  #EFE9DD;
  --color-backdrop:        rgba(27, 26, 23, 0.5);

  /* one accent: primary and the old sky links are the same colour now */
  --color-primary:        #1F4D3F;
  --color-primary-hover:  #173A30;
  --color-primary-light:  #E6EEE9;             /* paper-tinted accent steps, */
  --color-primary-100:    #D5E3DB;             /* not indigo tints           */
  --color-primary-200:    #B8CFC2;
  --color-secondary:        #1F4D3F;
  --color-secondary-hover:  #173A30;
  --color-secondary-light:  #E6EEE9;
  /* the highlighter, reserved for statements — it is a ground, never text */
  --color-accent:        #F3E2A6;
  --color-accent-light:  #FBF3D5;

  /* semantic, desaturated, each 4.5:1+ as text on paper */
  --color-success:        #2E6B45;
  --color-success-light:  #E4EFE7;
  --color-warning:        #8A5A00;
  --color-warning-light:  #F6ECD2;
  --color-error:          #A63232;
  --color-error-light:    #F5E1DE;

  /* content types: muted, for the dot + small-caps label device */
  --color-type-video:        #9B2C2C;
  --color-type-podcast:      #6B3F7A;
  --color-type-article:      #1D4E89;
  --color-type-infographic:  #1F4D3F;
  --color-type-guideline:    #9A6A00;
  --color-type-playbook:     #7A4A2B;

  /* per-space accent keeps working ([data-space-theme] still overrides it);
     only the literal RGB triple needs restating */
  --space-accent-rgb: 31, 77, 63;

  /* type: the fallbacks are metric-matched (tokens/fonts.css) */
  --font-sans:    'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Newsreader', 'Newsreader Fallback', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;

  /* radii: the generic steps soften; the semantic ones are the real ones */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-control: 999px;
  --radius-card:    16px;
  --radius-media:   12px;

  /* the homepage's 72px header, everywhere; sticky offsets read this token */
  --header-height: 72px;

  /* hairlines, not shadows. Cards already draw a border, so the small steps
     go to nothing; floating layers (menus, modals) keep a 1px rule so they
     do not dissolve into the page */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px #D9D2C3;
  --shadow-lg: 0 0 0 1px #D9D2C3;
  --shadow-xl: 0 0 0 1px #D9D2C3;
  --shadow-focus: 0 0 0 3px rgba(31, 77, 63, 0.25);

  /* The homepage's own --rr-* names, site-wide (Layer 2). The shared
     components (components/header.css, footer.css, buttons.css, tags.css,
     section-head.css, ask-bar.css) are written against them, so one rule
     serves the homepage and every other page. Literal twins of the `.rr`
     block above, for the newsletter reason; tests/test_design_tokens.py
     requires every `.rr` token here with the same value. */
  --rr-paper: #F6F2EA;
  --rr-paper-raised: #FBF9F4;
  --rr-paper-sunken: #EFE9DD;
  --rr-thumb: #DDD5C4;
  --rr-ink: #1B1A17;
  --rr-ink-2: #3A3630;
  --rr-ink-3: #5C574E;
  --rr-rule: #D9D2C3;
  --rr-rule-strong: #C9C1B0;
  --rr-rule-soft: #E4DDCE;
  --rr-accent: #1F4D3F;
  --rr-highlight: #F3E2A6;
  --rr-type-guideline: #9A6A00;
  --rr-type-research: #1D4E89;
  --rr-type-established: #1F4D3F;
  --rr-type-opinion: #6B3F7A;
  --rr-type-open: #9B2C2C;
  --rr-radius-pill: 999px;
  --rr-radius-card: 16px;
  --rr-radius-media: 12px;
  --rr-radius-band: 24px;
  --rr-radius-none: 0;
  --rr-radius-stamp: 3px;
  --rr-stamp-received: #A23B2A;
  --rr-font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --rr-font-body: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --rr-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --rr-tap: 44px;
  --rr-lamp: #F3E2A6;
  --rr-gold: #D99A20;
  --rr-night-paper: #1A1814;
  --rr-night-shadow: rgba(0, 0, 0, .55);
  --rr-on-vivid: #FBF9F4;           /* words on the violet pill, both themes */
}


/* ── The library at night (Ramy 2026-10-03, dark-mode plan Phase 1) ──────────
 *
 * Under the Reading Room only. `data-theme` on <html> is stamped before first
 * paint by _theme_boot.html: the reader's own choice (the sun/moon button,
 * remembered in localStorage) or, with none, the device's setting. With the
 * flag off neither the attribute nor these rules ever apply.
 *
 * The palette is the onboarding's night room, carried site-wide: warm
 * near-black paper, cream ink, the accent lifted to a light green. Both token
 * families flip — the design system's --color-* names and the --rr-* names —
 * and `.rr` wrappers (the homepage) are reached too, because `.rr` restates
 * the light values on its own element.
 *
 * Contrast (WCAG 2.1, against the lightest ground, --rr-paper-raised #24221D):
 *   ink 12.8:1 · ink-2 7.4:1 · ink-3 4.6:1 · accent 6.3:1 · warning 7.5:1 ·
 *   error 6.2:1. Card ground on the accent button (its label) is 6.3:1.
 *   The highlighter is a dark gold ground under cream ink, 7.8:1.
 */
html.rr-theme[data-theme="dark"],
html.rr-theme[data-theme="dark"] .rr {
  color-scheme: dark;

  --color-gray-50:  #1A1814;
  --color-gray-100: #13110E;
  --color-gray-200: #2E2B25;
  --color-gray-300: #3D3930;
  --color-gray-400: #6E685D;
  --color-gray-500: #8E897E;
  --color-gray-600: #B5B0A5;
  --color-gray-700: #B5B0A5;
  --color-gray-800: #D3CEC5;
  --color-gray-900: #EAE6DF;
  --color-gray-950: #EAE6DF;
  --color-white:           #24221D;
  --color-surface:         #24221D;
  --color-surface-raised:  #24221D;
  --color-surface-sunken:  #13110E;
  --color-backdrop:        rgba(0, 0, 0, 0.6);

  --color-primary:        #5FB296;
  --color-primary-hover:  #7CC4AB;
  --color-primary-light:  #18211D;             /* ink-3 on it 4.7:1 */
  --color-primary-100:    #23362F;
  --color-primary-200:    #2C4339;
  --color-secondary:        #5FB296;
  --color-secondary-hover:  #7CC4AB;
  --color-secondary-light:  #18211D;
  --color-accent:        #4F4320;
  --color-accent-light:  #2E2817;

  --color-success:        #6FBF8B;
  --color-success-light:  #1C2B21;
  --color-warning:        #E0A93A;
  --color-warning-light:  #33280F;
  --color-error:          #E58A7B;
  --color-error-light:    #3A1F1B;

  --color-type-video:        #D9705C;
  --color-type-podcast:      #B58BC4;
  --color-type-article:      #7FA6D6;
  --color-type-infographic:  #5FB296;
  --color-type-guideline:    #C49B3A;
  --color-type-playbook:     #C79A72;

  --space-accent-rgb: 95, 178, 150;

  --shadow-md: 0 0 0 1px #3D3930;
  --shadow-lg: 0 0 0 1px #3D3930;
  --shadow-xl: 0 0 0 1px #3D3930;
  --shadow-focus: 0 0 0 3px rgba(95, 178, 150, 0.35);

  --rr-paper: #1A1814;
  --rr-paper-raised: #24221D;
  --rr-paper-sunken: #13110E;
  --rr-thumb: #2E2B25;
  --rr-ink: #EAE6DF;
  --rr-ink-2: #B5B0A5;
  --rr-ink-3: #8E897E;
  --rr-rule: #3D3930;
  --rr-rule-strong: #4A463D;
  --rr-rule-soft: #2E2B25;
  --rr-accent: #5FB296;
  --rr-highlight: #4F4320;
  --rr-gold: #E0A93A;
  --rr-type-guideline: #C49B3A;
  --rr-type-research: #7FA6D6;
  --rr-type-established: #5FB296;
  --rr-type-opinion: #B58BC4;
  --rr-type-open: #D9705C;
  --rr-stamp-received: #D9705C;
}
html.rr-theme[data-theme="dark"] body { background: var(--rr-paper); color: var(--rr-ink); }
/* pictures that are pages (article stand-ins, scans) and photos: a touch
   dimmer, so a white page does not glare out of the night */
html.rr-theme[data-theme="dark"] img:not([src$=".svg"]):not(.no-dim) { filter: brightness(.92); }

/* Bands drawn in ink by day (the homepage's dark band, the topic strip on a
   card, the footer) would turn cream at night and glare. Inside them the
   tokens are re-set so they stay a darker band with light words: the ground
   below the page, the words in cream, the dim words in ink-2. */
/* (selectors written out: the bundle's minifier drops the space before :is) */
html.rr-theme[data-theme="dark"] .rr-dark,
html.rr-theme[data-theme="dark"] .rr-topic,
html.rr-theme[data-theme="dark"] .site-footer,
html.rr-theme[data-theme="dark"] body.rr-page .hero,
html.rr-theme[data-theme="dark"] body.rr-page .cd-head,
html.rr-theme[data-theme="dark"] body.rr-page .ip-nowbar,
html.rr-theme[data-theme="dark"] body.rr-page .player .gate,
html.rr-theme[data-theme="dark"] .search-result > .rs-topic,
html.rr-theme[data-theme="dark"] .lam-row > .rs-topic,
html.rr-theme[data-theme="dark"] .ld-head,
html.rr-theme[data-theme="dark"] .cd-head,
html.rr-theme[data-theme="dark"] .lac-thumbw,
html.rr-theme[data-theme="dark"] .pbd-card-thumb-wrap {
  --rr-ink: #0F0E0B;
  --rr-ink-2: #3D3930;
  --rr-ink-3: #4A463D;
  --rr-paper: #EAE6DF;
  --rr-rule: #B5B0A5;
  --rr-rule-strong: #8E897E;
}
/* the homepage's big ask field is white by day; at night it is a card */
html.rr-theme[data-theme="dark"] .rr .askbar .askbar-field { background: var(--rr-paper-raised); }

/* The collection and item pages (collection_v2.html, content_watch.html)
   carry pastel notes the day theme never remapped — the amber source and
   draft chips, the green disclaimer, the accept/decline marks. At night they
   become sunken paper with ink-2 words; the meaning stays in the words. */
html.rr-theme[data-theme="dark"] body.rr-page .draftchip,
html.rr-theme[data-theme="dark"] body.rr-page .srcnote,
html.rr-theme[data-theme="dark"] body.rr-page .srcnote .sn-act,
html.rr-theme[data-theme="dark"] body.rr-page .est,
html.rr-theme[data-theme="dark"] body.rr-page .pdisc,
html.rr-theme[data-theme="dark"] body.rr-page .sugg .ok,
html.rr-theme[data-theme="dark"] body.rr-page .sugg .no {
  background: var(--rr-paper-sunken); border-color: var(--rr-rule); color: var(--rr-ink-2);
}
html.rr-theme[data-theme="dark"] body.rr-page .srcnote a { color: var(--rr-accent); }
html.rr-theme[data-theme="dark"] body.rr-page .sugg .no { color: var(--rr-type-open); }
/* the black letterbox behind a player is right at night too; the page's
   white thumbnails of documents keep their paper, a touch dimmer (above) */
/* kind badges are white on the type colour by day; the night type colours
   are lighter, so the word goes dark (5.8:1 on the lightest, video) */
html.rr-theme[data-theme="dark"] body.rr-page .tbadge { color: var(--rr-paper-sunken); }

/* Owners' logos are drawn for white paper: a dark wordmark on a transparent
   ground vanishes at night. Every place a logo stands (collection cards,
   the collection's brand block, the item page's source, an institution's
   Space, Space cards in search) gives it a light plate at night, undimmed.
   People's photos are opaque, so the plate never shows behind them. */
html.rr-theme[data-theme="dark"] {
  --rr-logo-plate: #F3EEE4;
}
html.rr-theme[data-theme="dark"] .lcol-owner img,
html.rr-theme[data-theme="dark"] .coll-brand-logo:not(.coll-brand-logo--person) img,
html.rr-theme[data-theme="dark"] .src-brand-logo:not(.is-person) img,
html.rr-theme[data-theme="dark"] .space-hero-avatar-org:has(img),
html.rr-theme[data-theme="dark"] .space-hero-avatar-org img,
html.rr-theme[data-theme="dark"] .search-space-card.is-institutional .search-space-card-avatar {
  background: var(--rr-logo-plate);
  border-color: transparent;
  filter: none;
}

/* Browse cards with no picture: the fallback fill came from a grey step
   that turns light at night; it becomes the dark thumbnail ground */
html.rr-theme[data-theme="dark"] .pbd-card-thumb-fallback { background: var(--rr-thumb) !important; }