/* RepetHelper design tokens.
   This is the single source of truth for product color, type and spacing. */
:root {
  color-scheme: light;

  /* Brand and semantic color roles. */
  --rh-color-canvas: #f5f0e4;
  --rh-color-background: #ede6d7;
  --rh-color-surface-1: #fffdf7;
  --rh-color-surface-2: #f4eee1;
  --rh-color-surface-3: #e9e1d1;
  --rh-color-border: #d8cebb;
  --rh-color-border-strong: #beb29d;
  --rh-color-control-border: #867e6b;
  --rh-color-text: #22251f;
  --rh-color-text-secondary: #4e5148;
  --rh-color-text-muted: #69675d;
  --rh-color-primary: #4f7f36;
  --rh-color-primary-text: #416d2e;
  --rh-color-primary-hover: #416d2e;
  --rh-color-primary-pressed: #365c27;
  --rh-color-primary-soft: #e2efd8;
  --rh-color-secondary-green: #6d8a55;
  --rh-color-secondary-green-soft: #e9efdf;
  --rh-color-yellow: #a86b08;
  --rh-color-yellow-soft: #f7e9c7;
  --rh-color-success: #34713f;
  --rh-color-success-soft: #e1eee1;
  --rh-color-warning: #895807;
  --rh-color-warning-soft: #f8e8c4;
  --rh-color-danger: #b64e45;
  --rh-color-danger-text: #963f38;
  --rh-color-danger-hover: #963f38;
  --rh-color-danger-soft: #f7e3df;
  --rh-color-on-primary: #ffffff;
  --rh-color-focus: #4f7f36;
  --rh-color-overlay: rgba(16, 18, 15, .58);

  /* Typography. */
  --rh-font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rh-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --rh-font-size-xs: 12px;
  --rh-font-size-sm: 14px;
  --rh-font-size-base: 15px;
  --rh-font-size-md: 16px;
  --rh-font-size-lg: 18px;
  --rh-font-size-xl: 24px;
  --rh-font-size-2xl: 32px;
  --rh-font-size-display: 40px;
  --rh-line-height-tight: 1.15;
  --rh-line-height-base: 1.5;
  --rh-line-height-relaxed: 1.65;
  --rh-font-weight-regular: 400;
  --rh-font-weight-medium: 500;
  --rh-font-weight-semibold: 600;
  --rh-font-weight-bold: 700;

  /* Geometry. */
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 24px;
  --rh-space-6: 32px;
  --rh-space-7: 48px;
  --rh-space-8: 64px;
  --rh-radius-sm: 6px;
  --rh-radius-md: 10px;
  --rh-radius-lg: 14px;
  --rh-radius-pill: 999px;
  --rh-control-sm: 36px;
  --rh-control-md: 42px;
  --rh-control-lg: 48px;
  --rh-touch-target: 44px;

  /* Elevation is reserved for floating menus and dialogs. */
  --rh-shadow-menu: 0 12px 30px rgba(0, 0, 0, .24);
  --rh-shadow-dialog: 0 24px 64px rgba(0, 0, 0, .38);

  /* Whiteboard chrome follows the product system; ink colors stay independent. */
  --rh-color-canvas-board: #fbf8ef;
  --rh-color-canvas-dot: #ded5c4;

  /* Compatibility aliases used by the existing templates and page layouts. */
  --bg: var(--rh-color-canvas);
  --bg-accent: var(--rh-color-background);
  --surface: var(--rh-color-surface-1);
  --solid: var(--rh-color-surface-1);
  --surface-2: var(--rh-color-surface-2);
  --surface-3: var(--rh-color-surface-3);
  --line: var(--rh-color-border);
  --line-strong: var(--rh-color-border-strong);
  --text: var(--rh-color-text);
  --text-soft: var(--rh-color-text-secondary);
  --muted: var(--rh-color-text-muted);
  --primary: var(--rh-color-primary);
  --primary-text: var(--rh-color-primary-text);
  --primary-hover: var(--rh-color-primary-hover);
  --primary-soft: var(--rh-color-primary-soft);
  --accent: var(--rh-color-secondary-green);
  --accent-soft: var(--rh-color-secondary-green-soft);
  --success: var(--rh-color-success);
  --success-soft: var(--rh-color-success-soft);
  --warning: var(--rh-color-warning);
  --warning-soft: var(--rh-color-warning-soft);
  --danger: var(--rh-color-danger);
  --danger-text: var(--rh-color-danger-text);
  --danger-hover: var(--rh-color-danger-hover);
  --danger-soft: var(--rh-color-danger-soft);
  --on-primary: var(--rh-color-on-primary);
  --focus: var(--rh-color-focus);
  --green: var(--rh-color-success);
  --cyan: var(--rh-color-primary);
  --violet: var(--rh-color-secondary-green);
  --violet-strong: var(--rh-color-primary);
  --space-1: var(--rh-space-1);
  --space-2: var(--rh-space-2);
  --space-3: var(--rh-space-3);
  --space-4: var(--rh-space-4);
  --space-5: var(--rh-space-5);
  --space-6: var(--rh-space-6);
  --space-7: var(--rh-space-7);
  --space-8: var(--rh-space-8);
  --radius-sm: var(--rh-radius-sm);
  --radius-md: var(--rh-radius-md);
  --radius-lg: var(--rh-radius-lg);
  --radius-xl: var(--rh-radius-lg);
  --radius: var(--rh-radius-lg);
  --control-sm: var(--rh-control-sm);
  --control-md: var(--rh-control-md);
  --control-lg: var(--rh-control-lg);
  --shadow-sm: var(--rh-shadow-menu);
  --shadow-lg: var(--rh-shadow-dialog);
  --shadow: var(--rh-shadow-menu);
  --canvas: var(--rh-color-canvas-board);
  --canvas-dot: var(--rh-color-canvas-dot);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rh-color-canvas: #10120f;
  --rh-color-background: #141711;
  --rh-color-surface-1: #191c16;
  --rh-color-surface-2: #20241b;
  --rh-color-surface-3: #292e23;
  --rh-color-border: #343a2e;
  --rh-color-border-strong: #4a5340;
  --rh-color-control-border: #768269;
  --rh-color-text: #f5ecd8;
  --rh-color-text-secondary: #c8bfae;
  --rh-color-text-muted: #968e7e;
  --rh-color-primary: #8acb61;
  --rh-color-primary-text: #8acb61;
  --rh-color-primary-hover: #9ada70;
  --rh-color-primary-pressed: #76b34f;
  --rh-color-primary-soft: #26351f;
  --rh-color-secondary-green: #587d42;
  --rh-color-secondary-green-soft: #26321f;
  --rh-color-yellow: #e9b949;
  --rh-color-yellow-soft: #3b301a;
  --rh-color-success: #76c467;
  --rh-color-success-soft: #1f3520;
  --rh-color-warning: #e8af49;
  --rh-color-warning-soft: #3b2c16;
  --rh-color-danger: #e7776c;
  --rh-color-danger-text: #e7776c;
  --rh-color-danger-hover: #f08a7f;
  --rh-color-danger-soft: #3b211f;
  --rh-color-on-primary: #10140d;
  --rh-color-focus: #a5dd7c;
  --rh-color-overlay: rgba(7, 8, 7, .72);
  --rh-color-canvas-board: #141712;
  --rh-color-canvas-dot: #30362a;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}