/* =================================================================
   Aware Design — Studios Color Palette (Dark + Gold Theme)
   awaredesignstudios.com

   Premium agency aesthetic. Dark glass-morphism backgrounds with
   gold accent for primary CTAs. Blue secondary accent for links
   to the analysis tool (app.awaredesign.com).
   ================================================================= */

:root {
  /* Backgrounds — same deep darks as web_analysis_ui */
  --bg-base: #0a0a0f;
  --bg-surface: #12121a;
  --bg-elevated: #1a1a26;
  --bg-overlay: #222233;
  --bg-input: #16161f;

  /* Text — same high-contrast hierarchy */
  --text-primary: #f0f0f5;
  --text-secondary: #a0a0b8;
  --text-tertiary: #6a6a82;
  --text-muted: #44445a;
  --text-inverse: #0a0a0f;

  /* Accent — warm gold for premium positioning */
  --accent: #d4a843;
  --accent-hover: #e4bc5a;
  --accent-subtle: rgba(212, 168, 67, 0.12);
  --accent-glow: rgba(212, 168, 67, 0.25);

  /* Secondary accent — blue for "analyze" CTAs linking to the tool */
  --accent-secondary: #4d7dff;
  --accent-secondary-hover: #6690ff;

  /* Score grades — bright on dark (same as web_analysis_ui) */
  --grade-a: #22c95e;
  --grade-a-bg: rgba(34, 201, 94, 0.10);
  --grade-b: #4db8ff;
  --grade-b-bg: rgba(77, 184, 255, 0.10);
  --grade-c: #f5b731;
  --grade-c-bg: rgba(245, 183, 49, 0.10);
  --grade-d: #f58a31;
  --grade-d-bg: rgba(245, 138, 49, 0.10);
  --grade-f: #f54242;
  --grade-f-bg: rgba(245, 66, 66, 0.10);

  /* Severity */
  --severity-critical: #f54242;
  --severity-warning: #f5b731;
  --severity-opportunity: #4db8ff;
  --severity-info: #a0a0b8;

  /* Borders — white-opacity glass-morphism */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(212, 168, 67, 0.40);

  /* Shadows — dark with gold glow */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(212, 168, 67, 0.15);
  --shadow-glow-strong: 0 0 60px rgba(212, 168, 67, 0.25);
}