/* Design tokens for the legacy layout (direction 3a).
   Names and values: docs/design/inbound/20261003/handoff/CLAUDE_CODE_HANDOFF.md, TOKEN_TABLE.
   The colours are mirrored in app/assets/tailwind/application.css (@theme) for ai/; keep both in step.
   Sizes are px: html { font-size: 72.5% } makes rem unreliable for new rules. */
:root {
  /* action: everything that can be pressed */
  --color-action: #1f5c73;
  --color-action-hover: #174a5d;
  --color-action-tint: #e6eef1;
  --color-on-action: #ffffff;

  /* brand: the mark, the login band, empty states. Never on controls. */
  --color-brand: #c9673f;
  --color-brand-tint: #f3d9cc;

  /* surfaces */
  --color-surface-page: #f4f0ea;
  --color-surface-card: #fdfbf8;
  --color-surface-sunken: #ece6dc;
  --color-surface-sidebar: #efe9df;
  --color-surface-emphasis: #f3ede3;
  --color-row-pending: #fbf3e2;

  /* lines */
  --color-border: #d8cfc3;
  --color-border-sidebar: #dfd6c9;
  --color-scrim: rgba(42, 35, 32, .4);

  /* text */
  --color-text: #2a2320;
  --color-text-muted: #6b5f57;

  /* status */
  --color-status-pending: #7a4f00;
  --color-status-pending-bg: #f9ecd2;
  --color-status-approved: #1f6b3a;
  --color-status-approved-bg: #dfeee0;
  --color-status-rejected: #a62c25;
  --color-status-rejected-bg: #f8dcd8;
  --color-status-stopped: #6b5f57;
  --color-status-stopped-bg: #ece6dc;

  /* day of week */
  --color-holiday-sun: #b3362a;
  --color-holiday-sat: #1e4fa3;

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --text-display: 28px;
  --text-title: 24px;
  --text-heading: 18px;
  --text-body: 16px;
  --text-control: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --font-weight-strong: 600;
  --font-weight-normal: 400;
  --leading-body: 1.5;
  --leading-table: 1.4;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* sizes */
  --size-header: 56px;
  --size-sidebar: 240px;
  --size-control: 40px;
  --size-control-lg: 44px;
  --size-control-sm: 30px;
  --size-nav-row: 36px;
  --size-table-row: 36px;
  --size-chip: 26px;
  --size-content-max: 1024px;

  /* shape */
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-pill: 999px;
  --shadow-modal: 0 16px 48px rgba(42, 35, 32, .24);

  /* focus: outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); */
  --focus-ring: 2px solid #1f5c73;
  --focus-ring-offset: 2px;

  /* icons */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}