/* app/assets/stylesheets/rodeo_design_system.css */

/*
 * Rodeo product semantics with the Texas Bluebonnet MVP profile.
 *
 * Components consume purpose-named values only. ActiveAdmin-specific mapping
 * lives in app/frontend/stylesheets/design_system/active_admin.css.
 */
:root,
[data-design-system="texas-bluebonnet"] {
  color-scheme: light;

  --rodeo-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rodeo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --rodeo-font-size-sm: 0.75rem;
  --rodeo-font-size-md: 0.875rem;
  --rodeo-font-size-lg: 1rem;
  --rodeo-font-size-display: clamp(2rem, 3.3vw, 3.25rem);
  --rodeo-line-height-tight: 1.2;
  --rodeo-line-height-body: 1.5;
  --rodeo-font-weight-normal: 400;
  --rodeo-font-weight-medium: 600;
  --rodeo-font-weight-strong: 700;

  --rodeo-space-1: 0.25rem;
  --rodeo-space-2: 0.5rem;
  --rodeo-space-3: 0.75rem;
  --rodeo-space-4: 1rem;
  --rodeo-space-6: 1.5rem;
  --rodeo-space-8: 2rem;
  --rodeo-page-gutter: 1.875rem;
  --rodeo-control-height: 2.75rem;

  --rodeo-radius-control: 0.125rem;
  --rodeo-radius-panel: 0.25rem;
  --rodeo-radius-pill: 999px;
  --rodeo-border-width: 1px;
  --rodeo-focus-width: 3px;
  --rodeo-focus-offset: 3px;
  --rodeo-shadow-raised: 0 0.5rem 1.5rem rgb(24 47 69 / 12%);
  --rodeo-shadow-overlay: 0 1rem 3rem rgb(24 47 69 / 24%);
  --rodeo-motion-fast: 120ms;

  --rodeo-color-canvas: #f2eee5;
  --rodeo-color-surface: #fffaf0;
  --rodeo-color-surface-subtle: #e7dfcf;
  --rodeo-color-text: #182f45;
  --rodeo-color-text-muted: #536579;
  --rodeo-color-link: #135f8c;
  --rodeo-color-border: #7d6f5c;
  --rodeo-color-chrome: #12344d;
  --rodeo-color-on-chrome: #f7ead5;
  --rodeo-color-selected: #c9e2ee;
  --rodeo-color-focus: #b33a1f;
  --rodeo-color-action: #12344d;
  --rodeo-color-on-action: #f7ead5;
  --rodeo-color-danger: #932419;
  --rodeo-color-danger-surface: #fff0ee;
  --rodeo-color-success: #245c34;
  --rodeo-color-success-surface: #edf7ef;
  --rodeo-color-warning: #754600;
  --rodeo-color-warning-surface: #fff5dc;
}

:root.dark,
[data-design-system="texas-bluebonnet"][data-color-scheme="dark"] {
  color-scheme: dark;

  --rodeo-shadow-raised: 0 0.5rem 1.5rem rgb(0 0 0 / 24%);
  --rodeo-shadow-overlay: 0 1rem 3rem rgb(0 0 0 / 45%);

  --rodeo-color-canvas: #101b25;
  --rodeo-color-surface: #172a39;
  --rodeo-color-surface-subtle: #243b4d;
  --rodeo-color-text: #f7ead5;
  --rodeo-color-text-muted: #c9bfae;
  --rodeo-color-link: #80c7e8;
  --rodeo-color-border: #95846d;
  --rodeo-color-chrome: #07131d;
  --rodeo-color-on-chrome: #f7ead5;
  --rodeo-color-selected: #254f69;
  --rodeo-color-focus: #ffb49e;
  --rodeo-color-action: #80c7e8;
  --rodeo-color-on-action: #101b25;
  --rodeo-color-danger: #ffc1b8;
  --rodeo-color-danger-surface: #4a2525;
  --rodeo-color-success: #b5e5c0;
  --rodeo-color-success-surface: #223e2b;
  --rodeo-color-warning: #f6d892;
  --rodeo-color-warning-surface: #44381f;
}

@media (max-width: 48rem) {
  :root,
  [data-design-system="texas-bluebonnet"] {
    --rodeo-page-gutter: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-design-system="texas-bluebonnet"] {
    --rodeo-motion-fast: 0.01ms;
  }
}