/*
  Marline color system. Dark first.
  Raw palette (--mr-*-NNN) never changes. Semantic tokens (--mr-bg, --mr-text, ...)
  are what components use. Dark is the default; add data-theme="light" to opt in.
  One accent: Seizing Copper. It marks the person's call and nothing else.
*/

:root {
  /* Raw palette: ink (neutral, faint warmth) */
  --mr-ink-950: #0c0c0b;
  --mr-ink-900: #141413;
  --mr-ink-850: #1b1b19;
  --mr-ink-800: #252522;
  --mr-ink-700: #353531;
  --mr-ink-500: #5e5d58;
  --mr-ink-400: #7a7973;
  --mr-ink-300: #a3a29c;
  --mr-ink-100: #e2e1dc;
  --mr-ink-50: #f1f0ec;

  /* Raw palette: paper (light surfaces, neutral, not cream) */
  --mr-paper-50: #fbfbf9;
  --mr-paper-100: #f3f3f0;
  --mr-paper-200: #e9e9e5;
  --mr-paper-300: #dcdcd7;
  --mr-paper-400: #c5c5bf;
  --mr-paper-600: #5c5b56;
  --mr-paper-900: #121211;

  /* Raw palette: Seizing Copper */
  --mr-copper-300: #f0a57a;
  --mr-copper-400: #e2834a; /* the signature */
  --mr-copper-500: #c4642a;
  --mr-copper-600: #b4581f; /* the approve button on light, white text 4.8:1 */
  --mr-copper-700: #9e4b1b;
  --mr-copper-950: #2a160b;

  /* Semantic: dark (default) */
  color-scheme: dark;
  --mr-bg: var(--mr-ink-950);
  --mr-surface: var(--mr-ink-900);
  --mr-surface-2: var(--mr-ink-850);
  --mr-border: var(--mr-ink-800);
  --mr-border-strong: var(--mr-ink-700);
  --mr-text: var(--mr-ink-50);
  --mr-text-2: var(--mr-ink-100);
  --mr-text-muted: var(--mr-ink-300);
  --mr-text-faint: var(--mr-ink-400); /* 4.4:1, 18px+ or metadata only */
  --mr-text-disabled: var(--mr-ink-500);

  --mr-accent: var(--mr-copper-400); /* fills: primary button, mark bands */
  --mr-accent-hover: var(--mr-copper-300);
  --mr-accent-ink: var(--mr-copper-400); /* accent text, strokes, icons on bg */
  --mr-accent-subtle: var(--mr-copper-950); /* pending-approval row tint */
  --mr-on-accent: var(--mr-ink-950);
  --mr-focus: var(--mr-copper-400);
  --mr-selection: rgb(226 131 74 / 0.32);
}

[data-theme="light"] {
  color-scheme: light;
  --mr-bg: var(--mr-paper-100);
  --mr-surface: var(--mr-paper-50);
  --mr-surface-2: var(--mr-paper-200);
  --mr-border: var(--mr-paper-300);
  --mr-border-strong: var(--mr-paper-400);
  --mr-text: var(--mr-paper-900);
  --mr-text-2: #2c2c29;
  --mr-text-muted: var(--mr-paper-600);
  --mr-text-faint: var(--mr-ink-400); /* 3.9:1, 18px+ only */
  --mr-text-disabled: var(--mr-paper-400);

  --mr-accent: var(--mr-copper-400); /* same fill in both themes, ink text on it */
  --mr-accent-hover: var(--mr-copper-500);
  --mr-accent-ink: var(--mr-copper-700); /* 5.4:1 on paper-100 */
  --mr-accent-subtle: #f6e6dc;
  --mr-on-accent: var(--mr-ink-950);
  --mr-focus: var(--mr-copper-500);
  --mr-selection: rgb(196 100 42 / 0.22);
}

::selection {
  background: var(--mr-selection);
}