/*
 * mySpires design tokens: the colours, type, shapes and shadows of the redesign (Nov 2026).
 * Spec: /Users/akash/mySpires/design/look.md. Initial tokens: Claude (UI), Task 6a. Theme ownership handed to Codex (UI), Task 7b.
 *
 * Load order (head.php, bibtex.php): Bootstrap CSS → tokens.css → fonts.css → api/lib/mySpires.css → css/style.css.
 *
 * Two kinds of variables:
 *   --ms-*  the mySpires tokens. New CSS uses these.
 *   --bs-*  Bootstrap's own variables, pointed at the tokens so Bootstrap components follow the look.
 *
 * Notes for whoever uses these:
 * - --bs-body-bg follows the surface (white in light mode). Bootstrap paints cards, inputs, dropdowns, modals and list groups with it, so it is the
 *   surface colour, not the page colour. The grey page ground is --ms-ground, set on <body> by style.css.
 * - Until the "Bootstrap 5 compatibility" block at the end of style.css is folded in (Task 5c, #12), that block loads
 *   later and still wins for the --bs-* variables it sets (primary, link colours, border radii). Everything else here
 *   is in force at once.
 * - Dark values are in the [data-bs-theme=dark] block below (Task 7b, #48).
 * - The shared paper card (api/lib, also used by the extension) reads these with fallbacks, e.g.
 *   var(--ms-radius-card, 16px), because the extension doesn't load this file.
 */

:root,
[data-bs-theme=light] {
  /* ---------- Colour: one accent (blue), one highlight (gold) ---------- */
  --ms-blue: #0d6efd;            /* accent: primary buttons, active states, selection, links on hover */
  --ms-blue-rgb: 13, 110, 253;
  --ms-blue-hover: #0b5ed7;      /* primary button hover */
  --ms-blue-active: #0a58ca;     /* primary button pressed */
  --ms-blue-tint: #e8f0fe;       /* active nav pill, selected rows, icon tiles */
  --ms-blue-ink: #0a4fb4;        /* blue text on the tint */

  --ms-link: #0b5ed7;            /* link text (5.8:1 on white; plain #0d6efd is only 4.5:1) */
  --ms-link-rgb: 11, 94, 215;
  --ms-link-hover: #094ba8;
  --ms-link-hover-rgb: 9, 75, 168;

  --ms-gold: #e3a008;            /* genuine highlights only: starred tags, "Opened today", the "For you" strip */
  --ms-gold-rgb: 227, 160, 8;
  --ms-gold-tint: #fdf3d7;
  --ms-gold-ink: #7a5300;        /* gold text on the tint */

  /* ---------- Colour: neutrals ---------- */
  --ms-ink: #161827;             /* headings and body text */
  --ms-ink-rgb: 22, 24, 39;
  --ms-text-2: #3b3f52;          /* secondary running text (abstracts, descriptions) */
  --ms-muted: #5b6072;           /* meta lines, dates, "opened …", captions (6.3:1 on white, 5.7:1 on the ground) */
  --ms-muted-rgb: 91, 96, 114;
  --ms-faint: #8a8fa3;           /* placeholders and disabled text only (3.2:1); never for content */

  --ms-ground: #f4f5f8;          /* the page behind the cards */
  --ms-ground-rgb: 244, 245, 248;
  --ms-surface: #ffffff;         /* cards, bars, menus, inputs */
  --ms-surface-rgb: 255, 255, 255;
  --ms-fill: #f1f2f6;            /* tag pills, hover fills, search field, segmented controls */
  --ms-fill-strong: #e6e8ef;     /* pressed fills */
  --ms-pill-ink: #2d3142;        /* text on --ms-fill (tag pills) */

  --ms-line: #e3e5ec;            /* borders and dividers */
  --ms-line-strong: #c8cbd6;     /* input borders, dashed "unsaved" outlines on the ground */

  /* ---------- Colour: alerts only (alert boxes, destructive menu items, clash notices) ---------- */
  --ms-danger: #dc3545;
  --ms-danger-ink: #b02a37;
  --ms-danger-tint: #fbe9eb;
  --ms-warning: #fd7e14;
  --ms-warning-ink: #9a4a06;
  --ms-warning-tint: #fff1e5;
  --ms-success: #198754;
  --ms-success-ink: #146c43;
  --ms-success-tint: #e6f4ec;

  /* Surfaces with a specific role; PDF pages themselves always stay white. */
  --ms-cover: #eceef3;
  --ms-cover-unsaved: rgba(22, 24, 39, .04);
  --ms-cover-id-bg: rgba(255, 255, 255, .94);
  --ms-inverse-bg: #161827;
  --ms-inverse-ink: #fff;
  --ms-on-blue: #fff;
  --ms-toast-bg: #161827;
  --ms-toast-ink: #fff;
  --ms-toast-action: #9ec5fe;
  --ms-toast-danger-bg: #b02a37;

  /* ---------- Type ---------- */
  --ms-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ms-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* The six sizes. Nothing else. */
  --ms-fs-xs: 0.75rem;           /* 12px: badges, keyboard hints, tiny labels */
  --ms-fs-sm: 0.8125rem;         /* 13px: meta lines, pills, arXiv IDs, captions, section labels */
  --ms-fs-md: 0.875rem;          /* 14px: buttons, menus, sidebar, form labels, secondary text */
  --ms-fs-base: 1rem;            /* 16px: body text, card titles */
  --ms-fs-lg: 1.25rem;           /* 20px: section headings, dialog titles */
  --ms-fs-xl: 1.875rem;          /* 30px: page titles (28px on phones, see below) */

  --ms-fw-regular: 400;
  --ms-fw-medium: 500;
  --ms-fw-semibold: 600;         /* buttons, card titles, nav */
  --ms-fw-bold: 700;             /* page titles, headings */

  --ms-lh-tight: 1.2;            /* page titles */
  --ms-lh-snug: 1.35;            /* card titles, headings */
  --ms-lh-base: 1.55;            /* running text */
  --ms-tracking-tight: -0.02em;  /* page titles and the wordmark */
  --ms-tracking-caps: 0.06em;    /* small uppercase section labels ("STARRED", "TAGS") */

  /* ---------- Shape ---------- */
  --ms-radius-xs: 6px;           /* arXiv pill, key chips, kbd */
  --ms-radius-sm: 8px;           /* small buttons, inputs in dense places */
  --ms-radius-btn: 10px;         /* buttons, inputs, menus' items */
  --ms-radius-menu: 14px;        /* dropdown menus, popovers, toasts */
  --ms-radius-card: 16px;        /* paper cards and content cards */
  --ms-radius-panel: 18px;       /* sidebar, large panels, dialogs, PDF thumbnails' band */
  --ms-radius-pill: 999px;       /* top bar, nav pills, tag pills, chips */

  /* ---------- Shadows (soft; tinted with the ink colour, never pure black) ---------- */
  --ms-shadow-card: 0 1px 2px rgba(22, 24, 39, 0.06), 0 6px 18px rgba(22, 24, 39, 0.04);
  --ms-shadow-card-hover: 0 2px 4px rgba(22, 24, 39, 0.07), 0 10px 26px rgba(22, 24, 39, 0.07);
  --ms-shadow-bar: 0 1px 2px rgba(22, 24, 39, 0.06), 0 6px 20px rgba(22, 24, 39, 0.05);
  --ms-shadow-raised: 0 2px 6px rgba(22, 24, 39, 0.08), 0 16px 40px rgba(22, 24, 39, 0.14);  /* menus, toasts, sheets */
  --ms-shadow-button: 0 1px 2px rgba(22, 24, 39, 0.12);  /* white buttons sitting on the grey ground */
  --ms-focus-ring: 0 0 0 3px rgba(13, 110, 253, 0.28);

  /* ---------- Space (4px grid) ---------- */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 24px;
  --ms-space-6: 32px;
  --ms-space-7: 48px;

  /* ---------- Layout ---------- */
  --ms-page-max: 1280px;         /* content width of the top bar and the page below it */
  --ms-page-gutter: 24px;        /* side padding; 16px on phones (below) */
  --ms-bar-height: 60px;         /* the pill top bar */
  --ms-sidebar-width: 232px;     /* Library sidebar */
  --ms-tabbar-height: 64px;      /* phone bottom tab bar, without the safe-area inset */
  --ms-control-height: 40px;     /* buttons and inputs */
  --ms-control-height-sm: 32px;
  --ms-control-height-lg: 48px;

  /* ---------- Motion ---------- */
  --ms-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ms-duration: 150ms;
  --ms-duration-slow: 250ms;

  /* ---------- Layers ---------- */
  --ms-z-bar: 1030;              /* same as Bootstrap's fixed navbar */
  --ms-z-sheet: 1050;
  --ms-z-toast: 1090;

  /* ---------- Bootstrap, pointed at the tokens ---------- */
  --bs-primary: var(--ms-blue);
  --bs-primary-rgb: var(--ms-blue-rgb);
  --bs-primary-text-emphasis: var(--ms-blue-ink);
  --bs-primary-bg-subtle: var(--ms-blue-tint);

  --bs-font-sans-serif: var(--ms-font-sans);
  --bs-font-monospace: var(--ms-font-mono);
  --bs-body-font-family: var(--ms-font-sans);
  --bs-body-font-size: var(--ms-fs-base);
  --bs-body-line-height: var(--ms-lh-base);

  --bs-body-color: var(--ms-ink);
  --bs-body-color-rgb: var(--ms-ink-rgb);
  --bs-emphasis-color: var(--ms-ink);
  --bs-emphasis-color-rgb: var(--ms-ink-rgb);
  --bs-heading-color: var(--ms-ink);
  --bs-secondary-color: var(--ms-muted);
  --bs-secondary-color-rgb: var(--ms-muted-rgb);
  --bs-tertiary-color: var(--ms-faint);

  --bs-body-bg: var(--ms-surface);         /* the SURFACE, see the note at the top */
  --bs-body-bg-rgb: var(--ms-surface-rgb);
  --bs-secondary-bg: var(--ms-fill-strong);
  --bs-tertiary-bg: var(--ms-fill);

  --bs-link-color: var(--ms-link);
  --bs-link-color-rgb: var(--ms-link-rgb);
  --bs-link-hover-color: var(--ms-link-hover);
  --bs-link-hover-color-rgb: var(--ms-link-hover-rgb);
  --bs-highlight-bg: var(--ms-gold-tint);
  --bs-highlight-color: var(--ms-ink);

  --bs-border-color: var(--ms-line);
  --bs-border-color-translucent: rgba(22, 24, 39, 0.12);
  --bs-border-radius-sm: var(--ms-radius-sm);
  --bs-border-radius: var(--ms-radius-btn);
  --bs-border-radius-lg: var(--ms-radius-card);
  --bs-border-radius-xl: var(--ms-radius-panel);
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-pill: var(--ms-radius-pill);

  --bs-box-shadow-sm: var(--ms-shadow-card);
  --bs-box-shadow: var(--ms-shadow-raised);
  --bs-focus-ring-color: rgba(13, 110, 253, 0.28);
}

/* Phones: a little less side padding and a smaller page title. */
@media (max-width: 575.98px) {
  :root {
    --ms-page-gutter: 16px;
    --ms-fs-xl: 1.75rem;         /* 28px */
  }
}

/* Dark palette (#48): surfaces remain distinct; text and controls keep their contrast. */
[data-bs-theme=dark] {
  color-scheme: dark;
  --ms-ground: #11131b;
  --ms-ground-rgb: 17, 19, 27;
  --ms-surface: #1c1f2b;
  --ms-surface-rgb: 28, 31, 43;
  --ms-fill: #282c3b;
  --ms-fill-strong: #33384b;
  --ms-ink: #eef0f7;
  --ms-ink-rgb: 238, 240, 247;
  --ms-text-2: #d0d4e3;
  --ms-muted: #adb4ca;
  --ms-muted-rgb: 173, 180, 202;
  --ms-faint: #a2adc6;
  --ms-pill-ink: #e0e4ef;
  --ms-line: #414a63;
  --ms-line-strong: #7584a2;
  --ms-blue-tint: #183456;
  --ms-blue-ink: #a6c9ff;
  --ms-link: #8dbbff;
  --ms-link-rgb: 141, 187, 255;
  --ms-link-hover: #b6d3ff;
  --ms-link-hover-rgb: 182, 211, 255;
  --ms-gold: #efb633;
  --ms-gold-rgb: 239, 182, 51;
  --ms-gold-tint: #3e331c;
  --ms-gold-ink: #f4cf72;
  --ms-danger: #f17b8b;
  --ms-danger-ink: #ff9aa8;
  --ms-danger-tint: #451f2a;
  --ms-warning: #f3a34c;
  --ms-warning-ink: #ffd097;
  --ms-warning-tint: #3e2c1b;
  --ms-success: #70d7ae;
  --ms-success-ink: #8ce3bf;
  --ms-success-tint: #193a30;
  --ms-cover: #282e40;
  --ms-cover-unsaved: #202431;
  --ms-cover-id-bg: rgba(28, 31, 43, .96);
  --ms-toast-bg: #eef0f7;
  --ms-toast-ink: #161827;
  --ms-toast-action: #0a4fb4;
  --ms-toast-danger-bg: #8f1d29;
  --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, .24), 0 6px 18px rgba(0, 0, 0, .16);
  --ms-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .24);
  --ms-shadow-bar: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 20px rgba(0, 0, 0, .20);
  --ms-shadow-raised: 0 2px 6px rgba(0, 0, 0, .32), 0 16px 40px rgba(0, 0, 0, .40);
  --ms-shadow-button: 0 1px 2px rgba(0, 0, 0, .32);
  --ms-focus-ring: 0 0 0 3px rgba(141, 187, 255, .48);
  --bs-primary-text-emphasis: var(--ms-blue-ink);
  --bs-primary-bg-subtle: var(--ms-blue-tint);
  --bs-primary-border-subtle: var(--ms-line-strong);
  --bs-secondary-text-emphasis: var(--ms-text-2);
  --bs-secondary-bg-subtle: var(--ms-fill);
  --bs-secondary-border-subtle: var(--ms-line);
  --bs-success-text-emphasis: var(--ms-success-ink);
  --bs-success-bg-subtle: var(--ms-success-tint);
  --bs-success-border-subtle: var(--ms-success);
  --bs-info-text-emphasis: var(--ms-blue-ink);
  --bs-info-bg-subtle: var(--ms-blue-tint);
  --bs-info-border-subtle: var(--ms-line-strong);
  --bs-warning-text-emphasis: var(--ms-warning-ink);
  --bs-warning-bg-subtle: var(--ms-warning-tint);
  --bs-warning-border-subtle: var(--ms-warning);
  --bs-danger-text-emphasis: var(--ms-danger-ink);
  --bs-danger-bg-subtle: var(--ms-danger-tint);
  --bs-danger-border-subtle: var(--ms-danger);
  --bs-border-color-translucent: rgba(173, 180, 202, .24);
  --bs-focus-ring-color: rgba(141, 187, 255, .48);
}


/* ---------- Added by Codex (UI) (Task 5): put new tokens below this line, with a comment each ---------- */