/* Provenance: design-system/tokens.css @ M10 copy (2026-10-08), unmodified below this line. Edit the source in design-system/, not here. */
/*
 * Bulletin Design System — Foundations (draft v0.1, pending Owner review)
 *
 * Presentation specification only. Blueprint owns behaviour; Railway owns the
 * implementation. Every value here is a token — components never hard-code
 * colour, space, type or geometry.
 *
 * Theme selection:
 *   <html data-theme="light|dark">  explicit choice
 *   (no attribute)                  follows prefers-color-scheme
 */

:root {
  /* ── Brand & editorial palette (raw, theme-independent) ─────────────── */
  --b-indigo: #3D1D6D;
  --b-paprika: #B8452A;
  --b-mustard: #C8961E;
  --b-sky: #3E6F96;
  --b-olive: #5C6B3A;
  --b-culture: #7A4F9A;

  --b-newsprint: #F5F5F3;
  --b-paper: #FFFFFF;
  --b-ink: #0E0E0C;

  /* ── Type families ───────────────────────────────────────────────────── */
  --b-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-font-serif: Georgia, "Times New Roman", serif;
  --b-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── Type scale (px, 1.2 ratio rounded to the 4px grid for line-height) ─ */
  --b-text-2xs: 10px;   /* status pills, micro-metadata */
  --b-text-xs: 11px;    /* mono labels, datelines */
  --b-text-sm: 13px;    /* secondary UI, table cells */
  --b-text-md: 14px;    /* default UI body */
  --b-text-lg: 16px;    /* reading body, Pad editor */
  --b-text-xl: 20px;    /* panel titles (sans) */
  --b-text-2xl: 24px;   /* surface titles (serif) */
  --b-text-3xl: 32px;   /* editorial headline (serif) */
  --b-text-4xl: 44px;   /* front-page headline (serif) */

  --b-leading-tight: 1.15;
  --b-leading-snug: 1.35;
  --b-leading-body: 1.55;

  --b-weight-regular: 400;
  --b-weight-medium: 500;
  --b-weight-semibold: 600;
  --b-weight-bold: 700;

  --b-tracking-mono: 0.06em;
  --b-tracking-pill: 0.05em;

  /* ── Space: 4px foundation ───────────────────────────────────────────── */
  --b-space-0: 0;
  --b-space-1: 4px;
  --b-space-2: 8px;
  --b-space-3: 12px;
  --b-space-4: 16px;
  --b-space-5: 20px;
  --b-space-6: 24px;
  --b-space-8: 32px;
  --b-space-10: 40px;
  --b-space-12: 48px;
  --b-space-16: 64px;

  /* ── Geometry: square by default ─────────────────────────────────────── */
  --b-radius: 0px;
  --b-radius-dot: 50%;        /* status dots and presence only */
  --b-border-width: 1px;
  --b-border-width-strong: 2px; /* active tab underline, selected row rule */

  /* ── Control sizing ──────────────────────────────────────────────────── */
  --b-control-sm: 28px;
  --b-control-md: 36px;
  --b-control-lg: 44px;       /* also minimum touch target */

  /* ── Shell layout ────────────────────────────────────────────────────── */
  --b-rail-width: 216px;
  --b-rail-width-collapsed: 56px;
  --b-section-width: 248px;
  --b-details-width: 336px;
  --b-topbar-height: 56px;
  --b-content-max: 1120px;
  --b-reading-max: 680px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --b-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --b-duration-fast: 120ms;
  --b-duration: 180ms;

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --b-z-sticky: 10;
  --b-z-drawer: 40;
  --b-z-menu: 50;
  --b-z-dialog: 60;
  --b-z-toast: 70;
}

/* ── Light theme (default) ─────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;

  --b-bg: var(--b-newsprint);
  --b-surface: var(--b-paper);
  --b-surface-sunken: #EDEDE9;
  --b-surface-hover: #EDEDE9;
  --b-surface-selected: #EEE9F6;
  --b-overlay-scrim: rgba(14, 14, 12, 0.40);

  --b-border: #D8D8D2;
  --b-border-strong: #B9B9B1;
  --b-border-focus: var(--b-indigo);

  --b-text: var(--b-ink);
  --b-text-secondary: #4A4A46;
  --b-text-muted: #7A7A74;
  --b-text-inverse: var(--b-paper);

  --b-brand: var(--b-indigo);
  --b-brand-hover: #2E1554;
  --b-brand-fg: #FFFFFF;
  --b-brand-soft: #EEE9F6;
  --b-brand-text: var(--b-indigo);   /* links, active nav text */

  /* Editorial accents as foreground-safe text colours */
  --b-accent-paprika: var(--b-paprika);
  --b-accent-mustard: #9A7212;       /* darkened for 4.5:1 text on paper */
  --b-accent-sky: var(--b-sky);
  --b-accent-olive: var(--b-olive);
  --b-accent-culture: var(--b-culture);

  /* Semantic status (fg = text/border, bg = pill fill) */
  --b-positive-fg: var(--b-olive);   --b-positive-bg: #F0F3E4;
  --b-progress-fg: #9A7212;          --b-progress-bg: #FAF0D4;
  --b-info-fg: var(--b-sky);         --b-info-bg: #E4EEF7;
  --b-danger-fg: var(--b-paprika);   --b-danger-bg: #FBE3D8;
  --b-neutral-fg: #7A7A74;           --b-neutral-bg: #EDEDE9;
  --b-special-fg: var(--b-culture);  --b-special-bg: #F1E9F7;
  --b-brand-pill-fg: var(--b-indigo); --b-brand-pill-bg: #EEE9F6;

  /* Elevation: borders first; shadow only for hover lift and floating layers */
  --b-shadow-hover: 0 1px 2px rgba(14, 14, 12, 0.06);
  --b-shadow-float: 0 8px 24px -8px rgba(14, 14, 12, 0.18);

  --b-header-blur-bg: rgba(245, 245, 243, 0.82);
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --b-bg: #0B0C0F;
  --b-surface: #14161B;
  --b-surface-sunken: #0F1013;
  --b-surface-hover: #1A1D23;
  --b-surface-selected: #1F1538;
  --b-overlay-scrim: rgba(0, 0, 0, 0.60);

  --b-border: #272A31;
  --b-border-strong: #363B44;
  --b-border-focus: #A694E0;

  --b-text: #F4F5F7;
  --b-text-secondary: #A8ADB6;
  --b-text-muted: #6F7680;
  --b-text-inverse: var(--b-ink);

  --b-brand: var(--b-indigo);
  --b-brand-hover: #4E2A88;
  --b-brand-fg: #FFFFFF;
  --b-brand-soft: #1F1538;
  --b-brand-text: #A694E0;

  --b-accent-paprika: #E57250;
  --b-accent-mustard: #E5B048;
  --b-accent-sky: #8AA5C5;
  --b-accent-olive: #8FA154;
  --b-accent-culture: #B58FD4;

  --b-positive-fg: #8FA154;  --b-positive-bg: #1F2516;
  --b-progress-fg: #E5B048;  --b-progress-bg: #2A2010;
  --b-info-fg: #8AA5C5;      --b-info-bg: #162030;
  --b-danger-fg: #E57250;    --b-danger-bg: #2A1E18;
  --b-neutral-fg: #A8ADB6;   --b-neutral-bg: #1A1D23;
  --b-special-fg: #B58FD4;   --b-special-bg: #241830;
  --b-brand-pill-fg: #A694E0; --b-brand-pill-bg: #1F1538;

  --b-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40);
  --b-shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.60);

  --b-header-blur-bg: rgba(11, 12, 15, 0.80);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --b-bg: #0B0C0F;
    --b-surface: #14161B;
    --b-surface-sunken: #0F1013;
    --b-surface-hover: #1A1D23;
    --b-surface-selected: #1F1538;
    --b-overlay-scrim: rgba(0, 0, 0, 0.60);

    --b-border: #272A31;
    --b-border-strong: #363B44;
    --b-border-focus: #A694E0;

    --b-text: #F4F5F7;
    --b-text-secondary: #A8ADB6;
    --b-text-muted: #6F7680;
    --b-text-inverse: var(--b-ink);

    --b-brand: var(--b-indigo);
    --b-brand-hover: #4E2A88;
    --b-brand-fg: #FFFFFF;
    --b-brand-soft: #1F1538;
    --b-brand-text: #A694E0;

    --b-accent-paprika: #E57250;
    --b-accent-mustard: #E5B048;
    --b-accent-sky: #8AA5C5;
    --b-accent-olive: #8FA154;
    --b-accent-culture: #B58FD4;

    --b-positive-fg: #8FA154;  --b-positive-bg: #1F2516;
    --b-progress-fg: #E5B048;  --b-progress-bg: #2A2010;
    --b-info-fg: #8AA5C5;      --b-info-bg: #162030;
    --b-danger-fg: #E57250;    --b-danger-bg: #2A1E18;
    --b-neutral-fg: #A8ADB6;   --b-neutral-bg: #1A1D23;
    --b-special-fg: #B58FD4;   --b-special-bg: #241830;
    --b-brand-pill-fg: #A694E0; --b-brand-pill-bg: #1F1538;

    --b-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40);
    --b-shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.60);

    --b-header-blur-bg: rgba(11, 12, 15, 0.80);
  }
}