/*
  Design tokens — single source for colors, spacing, radius, shadows, typography.
  Future pages: import tokens first, then base / page CSS.
*/

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  /* brand & semantic colors */
  --color-brand: #dc2626;
  --color-brand-dark: #b91c1c;
  --color-brand-gradient-end: #991b1b;
  --color-accent-muted: #52525b;
  --color-surface: rgba(255, 255, 255, 0.88);
  --color-surface-strong: #ffffff;
  --color-bg-subtle: #f4f4f5;
  --color-bg-muted: #e4e4e7;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-line: rgba(24, 24, 27, 0.14);
  --color-danger: var(--color-brand-dark);
  --color-success: #15803d;
  --color-warning-bg: rgba(234, 179, 8, 0.12);
  --color-warning-border: rgba(234, 179, 8, 0.35);
  --color-warning-text: #854d0e;
  --color-hero-ink: #f7f9fc;

  /* legacy aliases — allow gradual migration off one-off vars */
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-dark);
  --muted: var(--color-text-muted);
  --ink: var(--color-text);

  /* spacing scale */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* radius */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 32px;

  /* shadows */
  --shadow-shell: 0 30px 80px rgba(24, 24, 27, 0.16);
  --shadow-card: 0 26px 60px rgba(24, 24, 27, 0.1);
  --shadow-btn: 0 18px 38px rgba(220, 38, 38, 0.28);
  --shadow-btn-hover: 0 22px 44px rgba(220, 38, 38, 0.32);

  /* typography */
  --font-heading: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  /* motion / interaction primitives */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.28s ease;
  --hover-lift-y-sm: -2px;
  --hover-lift-y-xs: -1px;

  /*
   * Full box-shadow stack for outline-style focus ring (semantic pages may override colour).
   * Use: box-shadow: var(--focus-ring);
   */
  --focus-ring-color: rgba(220, 38, 38, 0.12);
  --focus-ring: 0 0 0 4px var(--focus-ring-color);
  --focus-ring-offset: 2px;

  /* stacking — keep admin/user dashboards predictable */
  --z-base: 0;
  --z-sticky-banner: 15;
  --z-sidebar-overlay: 20;
  --z-dropdown: 100;
  --z-overlay: 1000;
  --z-modal: 10000;
  --z-toast: 10100;
}