/* ============================================================
   RLGL Shared Design Tokens
   Single source of truth for all flows and pages.
   File-specific tokens go in each page's own <style> block.
   ============================================================ */

:root {
  /* Brand — Coral */
  --rlgl-coral: #FF666E;
  --rlgl-coral-bg: #E04E56;          /* Rich coral for header/bar backgrounds (darker so logo red pops) */
  --rlgl-coral-bg-end: #EA6A70;      /* Gradient end for coral header bars */
  --rlgl-coral-hover: #e85a62;
  --rlgl-coral-light: #FFF1F1;
  --rlgl-coral-glow: rgba(255, 102, 110, 0.18);
  --rlgl-coral-text: #C43E45;           /* Coral on white — darker for contrast */

  /* Brand — Green */
  --rlgl-green: #5EC269;
  --rlgl-green-hover: #4fad59;
  --rlgl-green-light: #DFF5E3;

  /* Brand — Brown (RLGL overlap) */
  --rlgl-brown: #853838;

  /* Semantic — Warning */
  --warning-text: #e6a817;

  /* Text */
  --text-primary: #383C40;
  --text-secondary: #53595E;
  --text-muted: #9BA3AB;
  --text-on-dark: rgba(255, 255, 255, 0.7);
  --text-on-dark-muted: rgba(255, 255, 255, 0.45);

  /* Z-index layers — 6 stops */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Borders */
  --border: #D0D7DB;
  --border-light: #E8ECEE;
  --border-hover: rgba(255, 102, 110, 0.85);

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-light: #FCFCFC;
  --bg-page: #F2F4F5;
  --bg-muted: #F7F8F9;

  /* Radius — 4 stops + pill */
  --radius-xs: 4px;              /* small controls: checkboxes, badges, scrollbar thumbs */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation — 4 stops: flat · subtle · float · modal */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.18);

  /* Dark backgrounds — warm grays only */
  --bg-dark: #383C40;
  --bg-darker: #2D3033;
  --bg-darkest: #1A1C1E;

  /* Motion — 3 tiers: micro · meso · macro */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --dur-micro: 150ms;           /* hovers, toggles, icon swaps */
  --dur-meso: 250ms;            /* panels, drawers, dropdowns */
  --dur-macro: 400ms;           /* view transitions, modals */
  --transition: 150ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;

  /* Spacing — strict 8pt grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography */
  --ui-font: "Barlow", system-ui, sans-serif;

  /* Interaction */
  --focus-ring: 0 0 0 3px rgba(255, 102, 110, 0.25);
  --filter-coral: invert(55%) sepia(89%) saturate(479%) hue-rotate(313deg) brightness(103%) contrast(101%);
}