:root {
  /* Backgrounds — warm dark (aligned to the flame logo) */
  --color-bg:          #130E0A;
  --color-bg-surface:  #1C1510;
  --color-bg-elevated: #281D15;
  --color-border:       rgba(255, 138, 31, 0.16);
  --color-border-focus: #FF8A1F;

  /* Primary — flame orange (heart of the logo) */
  --color-primary:       #FF8A1F;
  --color-primary-hover: #F26B12;
  --color-primary-dim:   rgba(255, 138, 31, 0.15);
  --color-on-primary:    #1A1008;   /* dark text/icon ON primary & gold fills */

  /* Accent palette — pulled from the logo gradient */
  --color-accent:        #FFB020;   /* gold — signature */
  --color-accent-rose:   #FF6A4D;   /* coral ember */
  --color-accent-jaune:  #FFD23A;   /* peak yellow */
  --color-accent-orange: #FF7A18;   /* mid orange */
  --color-accent-cyan:   #1FC8D6;   /* cold complement (orange↔cyan) */
  --color-accent-magenta:#FF3D7F;   /* sunset rose */

  /* States */
  --color-danger:  #F23B2C;
  --color-success: #34CE7C;

  /* Text — warmed neutrals (no blue cast) */
  --color-text:           #FBF7F2;
  --color-text-secondary: #D8CEC4;
  --color-text-muted:     #9C9087;
  --color-text-dim:       #5E544C;

  --color-chat-bubble: rgba(28, 21, 16, 0.92);

  /* Gradients — traced from the logo (optional, for titles / fire CTAs) */
  --gradient-makers: linear-gradient(180deg, #FFE24A 0%, #FFB020 42%, #FF7A18 72%, #DE3A0F 100%);
  --gradient-ember:  linear-gradient(135deg, #FF9A1F 0%, #FF3D5E 100%);

  /* Liquid glass — frosted modal surfaces (CSS fallback for the WebGL lens) */
  --glass-bg:         rgba(28, 21, 16, 0.55);
  --glass-blur:       blur(24px) saturate(180%);

  /* Frosted glass — items that sit ON the liquid-glass panels, for contrast */
  --frost-bg:         rgba(28, 21, 16, 0.45);
  --frost-blur:       blur(10px) saturate(160%);
  --frost-border:     rgba(255, 255, 255, 0.10);
  --glass-border:     rgba(255, 255, 255, 0.12);
  --glass-shadow:     0 16px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Curves — rounded, not square */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadows — vibrant glow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(255, 138, 31, 0.22);

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  --z-hud: 10;
  --z-panel: 20;
  --z-modal: 30;
  --z-tooltip: 40;

  --hud-height: 56px;
  --panel-width: 360px;
}