/* clawofrohan.com — the one tokens file (CLAUDE.md §7, docs/REDESIGN_BRIEF.md §6).
   Every page links this. No page defines its own :root or writes a hex code. */
:root {
  /* surfaces */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F5;

  /* text */
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A6A;
  --text-tertiary: #8A8AA0;
  --text-on-dark: #FFFFFF;

  /* brand */
  --brand-navy: #1B2A4A;
  --brand-navy-hover: #24365E;
  --brand-teal: #00796B;
  --brand-teal-hover: #00574D;
  --brand-teal-light: #E0F2F1;
  --brand-teal-border: #B2DFDB;

  /* borders */
  --border-default: #DEE2E6;
  --border-focus: #1B2A4A;

  /* status: state only, never decoration */
  --status-green: #2E7D32;
  --status-green-light: #E8F5E9;
  --status-green-border: #C8E6C9;
  --status-amber: #F57F17;
  --status-amber-light: #FFF8E1;
  --status-amber-border: #FFE082;
  --status-amber-text: #7A5200;
  --status-amber-deep: #A65300;
  --status-red: #C62828;
  --status-red-light: #FFEBEE;
  --status-red-border: #FFCDD2;
  --status-blue: #1565C0;
  --status-blue-light: #E3F2FD;

  /* type */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion: 120–180ms, one curve */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth: var(--ease);
  --ease-out-expo: var(--ease);

  /* layout */
  --page-max: 1120px;
  --gutter: 24px;
  --header-h: 64px;

  /* Short aliases used by the workspace and admin pages until the Astro cutover.
     New code uses the long names above. */
  --bg: var(--bg-primary);
  --bg2: var(--bg-secondary);
  --bg3: var(--bg-tertiary);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-tertiary);
  --navy: var(--brand-navy);
  --teal: var(--brand-teal);
  --teal-l: var(--brand-teal-light);
  --border: var(--border-default);
  --green: var(--status-green);
  --amber: var(--status-amber);
  --red: var(--status-red);
  --blue: var(--status-blue);
  --green-l: var(--status-green-light);
  --amber-l: var(--status-amber-light);
  --red-l: var(--status-red-light);
  --blue-l: var(--status-blue-light);
}