/* MyBooks design tokens — the ONLY place raw colors are allowed to live.
 *
 * Look: ChatGPT / Genica. Flat, monochrome, hairline borders, pill buttons.
 * Light = white + ink. Dark = charcoal (#212121) + white. One blue accent.
 *
 * Theme is chosen by <html data-theme="light|dark">. lib/theme.ts sets it
 * (saved choice, else the OS setting). The bare :root block below is the
 * light theme and also the no-JS fallback.
 *
 * Rule for everyone (humans and agents): never write a hex/rgb color or a
 * pixel radius outside this file. Use a token. See docs/DESIGN.md.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --mb-bg: #ffffff;              /* page */
  --mb-surface: #ffffff;         /* cards/panels sit on the page; separated by a hairline */
  --mb-surface-muted: #f3f3f3;   /* quiet fills: table headers, inputs at rest, chips, hover */
  --mb-surface-raised: #ffffff;  /* popovers, menus, drawers, toasts */
  --mb-surface-wash: #f9f9f9;    /* code blocks, zebra rows, sunken areas */
  --mb-surface-accent: #f3f3f3;  /* selected row / active nav fill */
  --mb-overlay: rgba(13, 13, 13, 0.4); /* modal scrim */

  /* Text */
  --mb-ink: #0d0d0d;             /* headings, primary text */
  --mb-text: #0d0d0d;            /* body text */
  --mb-muted: #5d5d5d;           /* secondary text */
  --mb-faint: #8f8f8f;           /* tertiary text, placeholders, idle dots */

  /* Borders (hairlines) */
  --mb-border: rgba(13, 13, 13, 0.1);
  --mb-border-strong: rgba(13, 13, 13, 0.2);
  --mb-border-soft: rgba(13, 13, 13, 0.06);

  /* Primary action = ink (near-black in light, white in dark). Not a hue. */
  --mb-brand: #0d0d0d;
  --mb-brand-strong: #2b2b2b;    /* primary hover/pressed */
  --mb-brand-soft: #f3f3f3;      /* soft tint behind brand-colored things */
  --mb-on-brand: #ffffff;        /* text/icon ON a --mb-brand fill */
  --mb-disabled-bg: #d7d7d7;
  --mb-disabled-text: #8f8f8f;

  /* Accent = the single blue. Only for "needs you", links, focus. */
  --mb-accent: #007aff;
  --mb-accent-bg: rgba(0, 122, 255, 0.1);
  --mb-on-accent: #ffffff;

  /* Status */
  --mb-success: #248a3d;
  --mb-success-bg: rgba(36, 138, 61, 0.1);
  --mb-danger: #d70015;
  --mb-danger-bg: rgba(215, 0, 21, 0.08);
  --mb-warning: #b25e00;
  --mb-warning-bg: rgba(178, 94, 0, 0.1);
  --mb-info: #007aff;
  --mb-info-bg: rgba(0, 122, 255, 0.1);

  /* Elevation — almost everything is flat. */
  --mb-shadow-1: none;
  --mb-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08);   /* composer, popovers */
  --mb-shadow-3: 0 12px 34px rgba(0, 0, 0, 0.12); /* drawers, modals */
  --mb-focus: 0 0 0 3px rgba(0, 122, 255, 0.3);

  /* Charts: monochrome first, blue for emphasis, status hues when meaningful. */
  --mb-chart-1: #0d0d0d;
  --mb-chart-2: #5d5d5d;
  --mb-chart-3: #8f8f8f;
  --mb-chart-4: #c4c4c4;
  --mb-chart-accent: #007aff;
  --mb-chart-positive: #248a3d;
  --mb-chart-negative: #d70015;
  --mb-chart-grid: rgba(13, 13, 13, 0.08);
  --mb-chart-axis: #8f8f8f;
  --mb-chart-area: rgba(13, 13, 13, 0.06);

  /* Always-light surface for paper-like things (public invoice, print). */
  --mb-paper: #ffffff;
  --mb-paper-ink: #0d0d0d;

  /* Legacy aliases — keep so old CSS keeps working; do not use in new code. */
  --border: var(--mb-border);
  --surface: var(--mb-surface);
  --surface-2: var(--mb-surface-muted);
  --muted: var(--mb-muted);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --mb-bg: #212121;
  --mb-surface: #212121;
  --mb-surface-muted: #303030;
  --mb-surface-raised: #2a2a2a;
  --mb-surface-wash: #181818;
  --mb-surface-accent: #303030;
  --mb-overlay: rgba(0, 0, 0, 0.6);

  --mb-ink: #ffffff;
  --mb-text: #ececec;
  --mb-muted: #afafaf;
  --mb-faint: #8f8f8f;

  --mb-border: rgba(255, 255, 255, 0.12);
  --mb-border-strong: rgba(255, 255, 255, 0.22);
  --mb-border-soft: rgba(255, 255, 255, 0.07);

  --mb-brand: #ffffff;
  --mb-brand-strong: #e0e0e0;
  --mb-brand-soft: #303030;
  --mb-on-brand: #0d0d0d;
  --mb-disabled-bg: #4a4a4a;
  --mb-disabled-text: #8f8f8f;

  --mb-accent: #0a84ff;
  --mb-accent-bg: rgba(10, 132, 255, 0.16);
  --mb-on-accent: #ffffff;

  --mb-success: #30d158;
  --mb-success-bg: rgba(48, 209, 88, 0.14);
  --mb-danger: #ff453a;
  --mb-danger-bg: rgba(255, 69, 58, 0.14);
  --mb-warning: #ff9f0a;
  --mb-warning-bg: rgba(255, 159, 10, 0.14);
  --mb-info: #0a84ff;
  --mb-info-bg: rgba(10, 132, 255, 0.16);

  --mb-shadow-1: none;
  --mb-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.2);
  --mb-shadow-3: 0 12px 34px rgba(0, 0, 0, 0.45);
  --mb-focus: 0 0 0 3px rgba(10, 132, 255, 0.45);

  --mb-chart-1: #ffffff;
  --mb-chart-2: #afafaf;
  --mb-chart-3: #8f8f8f;
  --mb-chart-4: #5a5a5a;
  --mb-chart-accent: #0a84ff;
  --mb-chart-positive: #30d158;
  --mb-chart-negative: #ff453a;
  --mb-chart-grid: rgba(255, 255, 255, 0.1);
  --mb-chart-axis: #8f8f8f;
  --mb-chart-area: rgba(255, 255, 255, 0.07);
  /* --mb-paper stays white in dark mode on purpose. */
}

/* Shape, type and spacing do not change between themes. */
:root {
  /* Radii (Genica: 12 cards, 14 grouped panels, 22 bubbles, 25 composer, pill) */
  --mb-radius-xs: 6px;
  --mb-radius-sm: 8px;    /* inputs, small controls */
  --mb-radius-md: 12px;   /* cards, panels, media */
  --mb-radius-lg: 14px;   /* grouped panels, banners */
  --mb-radius-xl: 22px;   /* bubbles, sheets */
  --mb-radius-composer: 25px;
  --mb-radius-pill: 999px; /* buttons, chips, segmented */

  /* Spacing (4-pt). Page padding is owned by .workspace-content. */
  --mb-space-1: 4px;
  --mb-space-2: 8px;
  --mb-space-3: 12px;
  --mb-space-4: 16px;
  --mb-space-5: 20px;
  --mb-space-6: 24px;
  --mb-space-8: 32px;

  /* Type */
  --mb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mb-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --mb-text-xs: 12px;     /* captions, meta */
  --mb-text-sm: 13px;     /* section labels, table meta */
  --mb-text-md: 15px;     /* default UI text, rows, buttons */
  --mb-text-lg: 17px;     /* body, row titles */
  --mb-text-xl: 20px;     /* card/section titles */
  --mb-text-2xl: 24px;    /* page titles */
  --mb-weight-regular: 400;
  --mb-weight-medium: 500;
  --mb-weight-semibold: 600;

  /* Control sizes */
  --mb-control-h: 36px;       /* buttons, inputs */
  --mb-control-h-lg: 44px;    /* touch targets */

  /* Motion */
  --mb-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --mb-dur: 0.25s;
}

/* Always-light "paper" surface (public invoice, print, PDFs). Opt in with
   class="mb-paper": it re-declares the LIGHT tokens so nothing inside flips
   to dark. Wrap any screen that must stay white in it. */
.mb-paper {
  color-scheme: light;
  --mb-bg: #ffffff;
  --mb-surface: #ffffff;
  --mb-surface-raised: #ffffff;
  --mb-surface-muted: #f3f3f3;
  --mb-surface-wash: #f9f9f9;
  --mb-surface-accent: #f3f3f3;
  --mb-ink: #0d0d0d;
  --mb-text: #0d0d0d;
  --mb-muted: #5d5d5d;
  --mb-faint: #8f8f8f;
  --mb-border: rgba(13, 13, 13, 0.1);
  --mb-border-strong: rgba(13, 13, 13, 0.2);
  --mb-border-soft: rgba(13, 13, 13, 0.06);
  --mb-brand: #0d0d0d;
  --mb-brand-strong: #2b2b2b;
  --mb-on-brand: #ffffff;
  --mb-success: #248a3d;
  --mb-danger: #d70015;
  --mb-warning: #b25e00;
  --mb-disabled-bg: #d7d7d7;
  --mb-disabled-text: #8f8f8f;
  background: #ffffff;
  color: #0d0d0d;
}