/* === THE FIRES WITHIN — Brand Tokens v1.1 (Logo-Matched) === */
/* Source: the-fires-within-brand-guide.html                    */
/* Do not edit directly — update brand guide first              */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Gold Family (Logo Title Text) */
  --color-gold: #D4A854;
  --color-gold-light: #F0A840;
  --color-gold-dark: #A8843C;

  /* Crimson Fire Family (Logo Flames) */
  --color-fire: #C83818;
  --color-fire-light: #E88040;
  --color-fire-dark: #7A1815;

  /* Neutrals — Dark Mode (Logo Background) */
  --color-bg: #0E0806;
  --color-surface: #1A110B;
  --color-surface-raised: #2A1A10;
  --color-border: #3A2518;
  --color-text: #F5EDE4;
  --color-text-secondary: #E8DDD0;
  --color-text-muted: #C4B8A4;

  /* Neutrals — Light Mode */
  --color-bg-light: #F5EDE4;
  --color-surface-light: #FFFFFF;
  --color-border-light: #D8CCBE;
  --color-text-light: #1A110B;
  --color-text-secondary-light: #5C4A3A;

  /* Build-Up Risk — Traffic Light */
  --color-risk-high: #D94F4F;
  --color-risk-medium: #D4913A;
  --color-risk-low: #4A9E6B;
  --color-risk-positive: #3B7EC9;

  /* Proficiency Levels (Logo Fire Gradient) */
  --color-level-1: #5C4A3A;
  --color-level-2: #7A5A30;
  --color-level-3: #A8843C;
  --color-level-4: #D4A854;
  --color-level-5: #F0A840;

  /* Behavioral Cycle Phases (in order: 1→5) */
  --color-phase-apparent-normalcy: #3A3020;  /* Step 1 */
  --color-phase-buildup: #4A1210;            /* Step 2 */
  --color-phase-actingout: #4A2810;          /* Step 3 */
  --color-phase-justification: #3A2018;      /* Step 4 */
  --color-phase-pretend-normal: #1A2840;     /* Step 5 */

  /* Typography */
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 20px;

  /* Layout */
  --max-width: 1080px;
  --sidebar-width: 280px;
}