/*
 * Global resets, CSS custom properties, and base element styles shared by
 * every page. Propshaft (see config/initializers/assets.rb) auto-includes
 * every .css file under app/assets/stylesheets via `stylesheet_link_tag
 * :app` -- no manifest/@import wiring needed, each file below is its own
 * <link> tag. CSS custom properties on :root apply regardless of file
 * load order, so splitting this way is safe.
 */

/*
 * Single source of truth for colours, gradients, radii and shadows.
 * Light is the default; dark applies when the user picks it explicitly or,
 * with no explicit choice, when the OS prefers dark (theme_init.js sets
 * <html data-system-theme>). Teal is the brand/navigation/button colour.
 * Green is reserved for success.
 * --rgb-* channel tokens exist so alpha variants use rgb(var(--rgb-x) / a).
 */
:root,
[data-theme="light"] {
  color-scheme: light;

  --rgb-shadow: 23 43 52;
  --rgb-primary: 23 107 99;
  --rgb-copper: 196 123 69;
  --rgb-success: 34 166 90;
  --rgb-danger: 227 72 80;
  --rgb-warning: 233 149 40;
  --rgb-white: 255 255 255;

  --color-bg: #f6f8fa;
  --color-surface: #ffffff;
  --color-surface-secondary: #f0f4f6;
  --color-text: #172b34;
  --color-text-muted: #667780;
  --color-border: #e3e8ed;
  --color-on-primary: #ffffff;
  --color-on-sidebar: #ffffff;
  --color-highlight: #fde68a;

  --color-primary: #176b63;
  --color-primary-dark: #11544e;
  --color-primary-soft: #d9f1e7;
  --color-accent: #c47b45;
  --color-accent-light: #e6a56d;

  --color-sidebar: #16252c;
  --color-sidebar-end: #244e4c;

  --color-success: #22a65a;
  --color-warning: #e99528;
  --color-danger: #e34850;
  --color-danger-dark: #b92f38;
  --color-status-awaiting: #cbd5e1;
  --color-status-progress: #3b82f6;

  --gradient-primary: linear-gradient(135deg, #176b63, #103d3c);
  --gradient-copper: linear-gradient(135deg, #c47b45, #e6a56d);
  --gradient-sidebar: linear-gradient(160deg, var(--color-sidebar), var(--color-sidebar-end));
  --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-card: 0 4px 18px rgb(var(--rgb-shadow) / 0.05);
  --shadow-raised: 0 1rem 2.5rem rgb(var(--rgb-shadow) / 0.16);
}

[data-theme="dark"],
html[data-system-theme="dark"]:not([data-theme]) {
  color-scheme: dark;

  --rgb-shadow: 0 0 0;
  --rgb-primary: 109 214 194;
  --rgb-copper: 230 165 109;
  --rgb-success: 74 222 128;
  --rgb-danger: 251 113 133;
  --rgb-warning: 251 191 36;

  --color-bg: #101b21;
  --color-surface: #1a2930;
  --color-surface-secondary: #23353c;
  --color-text: #f1f6f5;
  --color-text-muted: #93a6ab;
  --color-border: #304047;
  --color-on-primary: #102b29;
  --color-on-sidebar: #ffffff;
  --color-highlight: #854d0e;

  --color-primary: #6dd6c2;
  --color-primary-dark: #8ce6d4;
  --color-primary-soft: #244e4c;
  --color-accent: #e6a56d;
  --color-accent-light: #e6a56d;

  --color-sidebar: #101b21;
  --color-sidebar-end: #244e4c;

  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #fb7185;
  --color-danger-dark: #fda4af;
  --color-status-awaiting: #64748b;
  --color-status-progress: #60a5fa;

  --gradient-primary: linear-gradient(135deg, #244e4c, #176b63);
  --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));

  --shadow-card: 0 4px 20px rgb(var(--rgb-shadow) / 0.15);
  --shadow-raised: 0 1rem 2.5rem rgb(var(--rgb-shadow) / 0.4);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

mark {
  background: var(--color-highlight);
  color: inherit;
  border-radius: 0.2rem;
  padding: 0 0.15rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}