:root {
  /* ==========================================================================
     chatty — Official Design System Tokens
     Theme: Ultra-clean Dark Canvas (#191919) with Radiant Ember Glow & Glassmorphism
     Strict Rule: NO harsh borders / NO unnecessary glow strokes
     Surfaces use pure fill opacities (fill-opacity: 0.06 - 0.20, solid #191919, #FFF)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     1. Background & Glow Palette
     -------------------------------------------------------------------------- */
  --rg-bg-main: #191919;
  --rg-bg-top: #191919;
  --rg-bg-mid: #191919;
  --rg-bg-bottom: #191919;
  --rg-bg-gradient: #191919;

  /* The 5 Signature Glow Colors from Design Spec */
  --glow-dark-amber: #99410B;
  --glow-rust:       #B33E1A;
  --glow-primary:    #FF6D12;
  --glow-coral:      #FE7F42;
  --glow-peach:      #FFAE7B;

  /* Card Gloss & Glass Fills */
  --rg-card-gloss: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  --rg-card-bg-dark: #202020;

  /* --------------------------------------------------------------------------
     2. Accent & State Colors
     -------------------------------------------------------------------------- */
  --rg-accent: #FF6D12;
  --rg-accent-hover: #FE7F42;
  --rg-accent-light: #FFAE7B;
  --rg-accent-deep: #B33E1A;
  --rg-accent-shadow: rgba(255, 109, 18, 0.35);

  /* Status Colors */
  --rg-success: #30D158;        /* iOS Success Green */
  --rg-success-ios: #30D158;
  --rg-warning: #FF9F0A;
  --rg-danger: #FF453A;

  /* Neutrals */
  --rg-white: #FFFFFF;
  --rg-black: #000000;

  /* --------------------------------------------------------------------------
     3. Pure Translucent Fills (NO BORDERS)
     -------------------------------------------------------------------------- */
  --rg-fill-glass-subtle: rgba(255, 255, 255, 0.05); /* Inactive items */
  --rg-fill-glass-default: rgba(255, 255, 255, 0.09); /* Standard glass pills, inputs, cards */
  --rg-fill-glass-hover: rgba(255, 255, 255, 0.16);  /* Active / hover states */
  --rg-fill-glass-strong: rgba(255, 255, 255, 0.22); /* Highlighted controls */
  
  /* Tinted Ember Glass Surfaces */
  --rg-fill-slate-glass: rgba(255, 109, 18, 0.14);
  --rg-fill-slate-hover: rgba(255, 109, 18, 0.24);
  --rg-fill-sheet: rgba(28, 28, 28, 0.85);            /* Modal / drawer card */

  /* --------------------------------------------------------------------------
     4. Typography (Apple SF Pro)
     -------------------------------------------------------------------------- */
  --rg-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
  --rg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --rg-font-weight-regular: 400;
  --rg-font-weight-medium: 500;
  --rg-font-weight-semibold: 600;
  --rg-font-weight-bold: 700;

  /* Text Opacity Levels */
  --rg-text-primary: #FFFFFF;
  --rg-text-secondary: rgba(255, 255, 255, 0.78);
  --rg-text-muted: rgba(255, 255, 255, 0.52);
  --rg-text-disabled: rgba(255, 255, 255, 0.32);
  --rg-text-dark: #121212;

  /* --------------------------------------------------------------------------
     5. Border Radii & Elevation
     -------------------------------------------------------------------------- */
  --rg-radius-pill: 9999px;
  --rg-radius-card-xl: 32px;
  --rg-radius-card-lg: 24px;
  --rg-radius-card-md: 18px;
  --rg-radius-card-sm: 12px;
  --rg-radius-circle: 50%;

  /* Blur & Elevation */
  --rg-backdrop-blur: blur(28px);
  --rg-shadow-card: 0 20px 45px rgba(0, 0, 0, 0.55);
  --rg-shadow-pill-white: 0 4px 18px rgba(0, 0, 0, 0.25);
  --rg-shadow-pill-black: 0 4px 18px rgba(0, 0, 0, 0.45);
  --rg-shadow-accent: 0 10px 30px rgba(255, 109, 18, 0.28);

  /* Transitions */
  --rg-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --rg-transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}