/**
 * Ember Theme — Warm dark analog, amber accent, grain texture feel.
 * For: baselradar, cinematype
 *
 * Personality: cinematic, tactile, warm. Analog warmth in digital form.
 * Bricolage Grotesque for headings (loaded conditionally in base.html).
 */

html[data-theme="ember"] {
  /* --- Backgrounds (warm charcoal-brown) --- */
  --space-black:    #1a1412;
  --space-dark:     #211a17;
  --space-gray-900: #2a211d;
  --space-gray-800: #362b25;
  --space-gray-700: #4a3d34;

  /* --- Text (warm cream/khaki) --- */
  --text-primary:   #f0e6d6;
  --text-secondary: #b8a894;
  --text-muted:     #7d6e5e;
  --text-disabled:  #504339;

  /* --- Override accent → amber --- */
  --spacex-blue:       #f59e0b;
  --spacex-blue-light: #fbbf24;
  --spacex-blue-bright: #fcd34d;
  --spacex-blue-dark:  #d97706;

  /* --- Accent tints (amber) --- */
  --accent-tint:   rgba(245, 158, 11, 0.08);
  --accent-border: rgba(245, 158, 11, 0.15);
  --accent-glow:   rgba(245, 158, 11, 0.20);

  /* --- Glass → warm tint, subtle blur --- */
  --glass-bg:         rgba(42, 33, 29, 0.70);
  --glass-border:     rgba(245, 158, 11, 0.10);
  --glass-backdrop:   blur(8px);
  --glass-shadow:     0 4px 20px rgba(0, 0, 0, 0.35);
  --glow-blue:        0 0 16px rgba(245, 158, 11, 0.12);
  --glow-blue-strong: 0 0 32px rgba(245, 158, 11, 0.22);

  /* --- Typography (expressive grotesque, tight headings) --- */
  --font-heading:            'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --letter-spacing-heading:  -0.02em;
  --text-transform-heading:  none;
  --line-height-tight:       1.15;

  /* --- Border radius (medium, organic) --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* --- Shadows (warm, diffuse) --- */
  --shadow-sm: 0 2px 6px  rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* --- Component: Buttons (warm border, amber glow on hover) --- */
  --btn-border:          1px solid rgba(245, 158, 11, 0.25);
  --btn-radius:          8px;
  --btn-shadow:          0 2px 8px rgba(0, 0, 0, 0.25);
  --btn-hover-shadow:    0 4px 16px rgba(245, 158, 11, 0.15);
  --btn-hover-transform: translateY(-1px);

  /* --- Component: Cards (warm border, lift on hover) --- */
  --card-border:          1px solid rgba(245, 158, 11, 0.08);
  --card-radius:          12px;
  --card-shadow:          0 4px 12px rgba(0, 0, 0, 0.30);
  --card-hover-shadow:    0 8px 24px rgba(0, 0, 0, 0.35), 0 0 8px rgba(245, 158, 11, 0.08);
  --card-hover-transform: translateY(-2px);

  /* --- Component: Inputs (warm border, amber focus) --- */
  --input-border:     1px solid rgba(245, 158, 11, 0.15);
  --input-radius:     8px;
  --input-focus-ring: 0 0 0 2px rgba(245, 158, 11, 0.15);

  /* --- Component: Nav (warm translucent) --- */
  --nav-bg:     rgba(26, 20, 18, 0.90);
  --nav-border: 1px solid rgba(245, 158, 11, 0.08);

  /* --- Component: Badges --- */
  --badge-radius: 6px;

  /* --- Dividers (warm amber tint) --- */
  --divider-width: 1px;
  --divider-color: rgba(245, 158, 11, 0.10);

  /* --- Animation: smooth, warm easing --- */
  --ease-smooth:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast:     160ms var(--ease-smooth);
  --transition-base:     250ms var(--ease-smooth);
  --transition-slow:     380ms var(--ease-smooth);
  --hover-lift-sm:       translateY(-1px);
  --hover-lift-md:       translateY(-3px);
}