/* =============================================================
   RCS Business Suite — Design Tokens
   All colors, fonts, spacing, and radii defined here.
   NEVER use hardcoded values in other CSS files — always
   reference a token defined in this file.
   ============================================================= */

:root {

  /* --- Brand Colors ---
     Primary: RCS Red — headers, primary buttons, branding
     Accent:  Water Blue — highlights, secondary backgrounds          */
  --color-primary:      #B22234;
  --color-primary-dark: #8B1A29;   /* Hover states, focus rings */
  --color-accent:       #A8D8EA;
  --color-accent-dark:  #7EC8E3;   /* Borders, active accent states */

  /* --- Functional Colors ---
     Used for status indicators throughout the app.                   */
  --color-success: #2E7D32;   /* Approved, confirmed, saved */
  --color-warning: #F9A825;   /* Pending, draft, awaiting review */
  --color-error:   #C62828;   /* Rejected, validation errors */

  /* --- Neutrals ---                                                  */
  --color-white:       #FFFFFF;
  --color-bg:          #F5F5F5;   /* Page/screen background */
  --color-text:        #333333;   /* Primary body text */
  --color-text-light:  #666666;   /* Secondary/helper text, labels */
  --color-border:      #DDDDDD;   /* Input borders, dividers */
  --color-overlay:     rgba(0, 0, 0, 0.45);  /* Modal backdrops */

  /* --- Typography ---
     Font stack favors system fonts for fast load on mobile.          */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-sm:   14px;
  --font-size-base: 16px;   /* Body copy — minimum for readability */
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-h1:   28px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  --line-height-tight:  1.3;
  --line-height-normal: 1.5;

  /* --- Spacing ---
     Base unit is 4px. All spacing is a multiple of 4.                */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* --- Border Radius ---                                             */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;   /* Pill-shaped buttons, badges */

  /* --- Shadows ---                                                   */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* --- Touch Targets ---
     Minimum 44x44px per CLAUDE.md for mobile usability.             */
  --tap-target-min: 44px;

  /* --- Transitions ---                                              */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Z-index Scale ---                                            */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

}