/* =================================================
   CAJUEIRO.TECH - Design Tokens (Dark Mode / Claude-inspired)
   ================================================= */

:root {
  /* ─── Core Palette (Claude-inspired dark) ─── */
  --color-bg-deep:       #1a1a1a;     /* Deepest background */
  --color-bg:            #1e1e1e;     /* Main background */
  --color-bg-elevated:   #252525;     /* Cards, elevated surfaces */
  --color-bg-hover:      #2a2a2a;     /* Hover states on surfaces */
  --color-bg-active:     #303030;     /* Active/pressed states */

  /* ─── Sand / Beige accents (Claude warmth) ─── */
  --color-sand:          #D4A574;     /* Primary warm accent */
  --color-sand-light:    #E8C9A0;     /* Light variant */
  --color-sand-muted:    #B8956A;     /* Muted/hover variant */
  --color-sand-dim:      rgba(212, 165, 116, 0.15);  /* Subtle bg tint */

  /* ─── Cajueiro green (preserved identity) ─── */
  --color-cajueiro:      #5B9B7A;     /* Lighter green for dark bg */
  --color-cajueiro-dim:  rgba(91, 155, 122, 0.12);   /* Subtle green tint */

  /* ─── Text hierarchy ─── */
  --color-text-primary:  #F0EDE8;     /* Main text — warm off-white */
  --color-text-secondary:#A8A29E;     /* Secondary text — stone */
  --color-text-muted:    #6B6560;     /* Muted/disabled text */
  --color-text-inverse:  #1a1a1a;     /* Text on light surfaces */

  /* ─── Borders ─── */
  --color-border:        #333333;     /* Default border */
  --color-border-subtle: #2a2a2a;     /* Subtle separators */
  --color-border-strong: #444444;     /* Emphasized borders */

  /* ─── AI accent (purple, kept for AI content) ─── */
  --color-ai:            #8B7CF6;     /* AI purple, lighter for dark bg */
  --color-ai-light:      #A594F9;     /* AI purple hover/light variant */
  --color-ai-dim:        rgba(139, 124, 246, 0.12);

  /* ─── Semantic ─── */
  --color-success:       #6EC995;
  --color-error:         #F87171;

  /* ─── LEGACY ALIASES (backward compat) ─── */
  --color-primary:       var(--color-sand);
  --color-primary-dark:  var(--color-sand-muted);
  --color-primary-light: var(--color-sand-light);
  --color-accent:        var(--color-cajueiro);
  --color-accent-dark:   #4A8A69;
  --color-accent-light:  var(--color-cajueiro);
  --color-background:    var(--color-bg);
  --color-text:          var(--color-text-primary);
  --color-text-light:    var(--color-text-secondary);
  --color-surface:       var(--color-bg-elevated);

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

  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */
  --text-5xl: 3.5rem;    /* 56px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Spacing */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Border Radius */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ─── Component-specific backgrounds ─── */
  --color-header-bg:         rgba(30, 30, 30, 0.92);
  --color-audio-player-bg:   rgba(30, 30, 30, 0.95);
  --color-mentoria-grad-start: #2a2520;
  --color-mentoria-grad-end:   #1f1c18;
  --color-footer-social-bg:  rgba(255, 255, 255, 0.1);
  --color-footer-separator:  rgba(255, 255, 255, 0.1);
  --color-footer-border-mobile: rgba(255, 255, 255, 0.08);

  /* Shadows (dark-mode adapted: glow-like) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-sand: 0 0 24px rgba(212, 165, 116, 0.15);
  --shadow-glow-green: 0 0 24px rgba(91, 155, 122, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
}

/* =================================================
   LIGHT MODE OVERRIDES
   ================================================= */

[data-theme="light"] {
  /* Backgrounds */
  --color-bg-deep:       #F5F0EB;
  --color-bg:            #FAF7F4;
  --color-bg-elevated:   #FFFFFF;
  --color-bg-hover:      #F0EBE5;
  --color-bg-active:     #E8E2DB;

  /* Sand accents (darker for light bg contrast) */
  --color-sand:          #B8895A;
  --color-sand-light:    #A07545;
  --color-sand-muted:    #C9A07A;
  --color-sand-dim:      rgba(184, 137, 90, 0.1);

  /* Cajueiro green (darker for light bg) */
  --color-cajueiro:      #3D7D5C;
  --color-cajueiro-dim:  rgba(61, 125, 92, 0.08);

  /* Text hierarchy */
  --color-text-primary:  #2C2520;
  --color-text-secondary:#6B6560;
  --color-text-muted:    #A8A29E;
  --color-text-inverse:  #FFFFFF;

  /* Borders */
  --color-border:        #E0D8D0;
  --color-border-subtle: #EBE5DE;
  --color-border-strong: #C8BFB5;

  /* AI accent */
  --color-ai:            #6C5CE7;
  --color-ai-light:      #5A4BD6;
  --color-ai-dim:        rgba(108, 92, 231, 0.08);

  /* Semantic */
  --color-success:       #2D9F5B;
  --color-error:         #DC2626;

  /* Legacy aliases */
  --color-accent-dark:   #2D6B48;

  /* Shadows (elevation-based for light mode) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-sand: 0 4px 16px rgba(184, 137, 90, 0.15);
  --shadow-glow-green: 0 4px 16px rgba(61, 125, 92, 0.15);

  /* Component-specific overrides */
  --color-header-bg:       rgba(250, 247, 244, 0.92);
  --color-audio-player-bg: rgba(250, 247, 244, 0.95);
  --color-mentoria-grad-start: #F5EDE5;
  --color-mentoria-grad-end:   #EDE3D8;
  --color-footer-social-bg:  rgba(0, 0, 0, 0.06);
  --color-footer-separator:  rgba(0, 0, 0, 0.08);
  --color-footer-border-mobile: rgba(0, 0, 0, 0.06);
}