/**
 * 100x Life Planning System - CSS Variables
 * Official 100x Forum brand colors, typography, and design tokens
 */

:root {
  /* 100x Forum Brand Colors */
  --teal-accent: #489CB8;
  --teal-dark: #3a8299;
  --teal-light: #e8f4f8;
  --gold: #DF9A32;
  --gold-dark: #c4892a;
  --gold-light: #fdf6e8;
  --slate-blue: #83A9B2;

  /* Brand grays */
  --black: #000000;
  --charcoal: #131313;

  /* Grays - extended palette */
  --gray-100: #fcfcfc;
  --gray-200: #f7f7f7;
  --gray-300: #e0e0e0;
  --gray-400: #c0c0c0;
  --gray-500: #83A9B2;
  --gray-600: #606060;
  --gray-700: #353535;
  --gray-800: #131313;
  --gray-900: #000000;

  /* Background colors - Light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-tertiary: #fcfcfc;

  /* Text colors */
  --text-dark: #131313;
  --text-secondary: #83A9B2;
  --text-muted: #83A9B2;
  --text-light: #ffffff;

  /* Borders */
  --border-light: #e0e0e0;
  --border-medium: #83A9B2;

  /* Legacy mappings for compatibility */
  --navy-primary: #131313;
  --navy-dark: #000000;
  --navy-medium: #353535;
  --navy-light: #83A9B2;
  --navy-darkest: #000000;
  --cream: #f7f7f7;
  --cream-dark: #e0e0e0;

  /* Typography - 100x Forum fonts */
  --font-heading: 'Frank Ruhl Libre', Georgia, serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Site-wide text-size bump: every font-size is calc(value + --text-bump),
     so the whole site can be nudged from one place without touching layout. */
  --text-bump: 2px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius - 100x Forum uses sharp corners */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 50rem;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Dark theme */
[data-theme="dark"] {
  /* Brand colors adjusted for dark backgrounds */
  --teal-accent: #5bb8d4;
  --teal-dark: #489CB8;
  --teal-light: #1a3a4a;
  --gold: #e8a83a;
  --gold-dark: #DF9A32;
  --gold-light: #2a2515;
  --slate-blue: #9fc4cc;

  /* Grays inverted for dark theme */
  --gray-100: #131313;
  --gray-200: #1a1a1a;
  --gray-300: #2a2a2a;
  --gray-400: #454545;
  --gray-500: #9fc4cc;
  --gray-600: #c0c0c0;
  --gray-700: #e0e0e0;
  --gray-800: #f7f7f7;
  --gray-900: #fcfcfc;

  /* Background colors - Dark theme */
  --bg-primary: #242424;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2e2e2e;

  /* Text colors - inverted for dark */
  --text-dark: #f7f7f7;
  --text-secondary: #9fc4cc;
  --text-muted: #9fc4cc;
  --text-light: #131313;

  /* Borders */
  --border-light: #383838;
  --border-medium: #505050;

  /* Legacy mappings */
  --navy-primary: #f7f7f7;
  --navy-dark: #fcfcfc;
  --navy-medium: #e0e0e0;
  --navy-light: #9fc4cc;
  --navy-darkest: #f7f7f7;
  --cream: #131313;
  --cream-dark: #2a2a2a;

  /* Shadows - more prominent in dark mode */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}