/*
 * Propshaft links every .css file in app/assets in path order (stylesheet_link_tag :app).
 * Cascade layers make that order irrelevant: this file sorts first and fixes the layer order.
 *
 *   application.css  layer order and design tokens
 *   fonts.css        Inter, served from app/assets/fonts (OFL, vendor/fonts/inter/LICENSE)
 *   base.css         reset and element defaults
 *   layout.css       app shell (sidebar, page header) and sign-in pages
 *   components.css   buttons, forms, cards, lists, tables, badges, flash messages
 *
 * Propshaft lists the directories under app/assets when the app boots: after adding one
 * (as app/assets/fonts was), restart the server or its files answer 404.
 */
@layer reset, base, layout, components, utilities;

:root {
  /* Colors: neutral greys with one indigo accent. Light theme only for now. */
  --color-bg: #fbfbfc;
  --color-surface: #ffffff;
  --color-sidebar: #f5f5f7;
  --color-hover: #f0f1f4;
  --color-selected: #e8e9ee;
  --color-border: #e4e5ea;
  --color-border-strong: #d2d4db;

  --color-text: #1c1d21;
  --color-text-secondary: #50535b;
  --color-text-tertiary: #6b6f78;

  --color-accent: #5e6ad2;
  --color-accent-hover: #4e5ac6;
  --color-accent-soft: #eef0fd;
  --color-focus: rgb(94 106 210 / 0.35);

  --color-danger: #c93b3b;
  --color-danger-soft: #fdeeee;
  --color-success: #23845a;
  --color-success-soft: #e7f6ee;
  --color-warning: #a8670a;
  --color-warning-soft: #fdf3e1;

  /* Type */
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;

  /* Space, shape, depth */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgb(16 17 26 / 0.05);
  --shadow: 0 1px 2px rgb(16 17 26 / 0.06), 0 4px 12px rgb(16 17 26 / 0.06);

  --control-height: 30px;
  --sidebar-width: 224px;
  --content-width: 1200px;

  color-scheme: light;
}