/* Redmoon Brand System — based on Redmoon Brand Quick Guide */

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

:root {
  /* Primary palette */
  --mars: #F42C2C;
  --mars-rgb: 244, 44, 44;
  --galaxy: #141121;
  --galaxy-rgb: 20, 17, 33;
  --nebula: #F1F2F4;
  --nebula-rgb: 241, 242, 244;
  --star-gazer: #F4C940;
  --star-gazer-rgb: 244, 201, 64;

  /* Galaxy tints */
  --galaxy-90: #2c2a39;
  --galaxy-80: #434151;
  --galaxy-60: #726f7c;
  --galaxy-40: #a09ea7;
  --galaxy-20: #cfcdd2;

  /* Type scale */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-heading: 'Oswald', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Light theme (default) */
:root,
[data-theme="light"] {
  --bg: var(--nebula);
  --bg-alt: #ffffff;
  --bg-raised: #ffffff;
  --bg-input: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f7f7fa;
  --border: #e3e4e8;
  --border-strong: #c9cad0;
  --text: var(--galaxy);
  --text-muted: #5a5762;
  --text-faint: #8a8792;
  --accent: var(--mars);
  --accent-hover: #d51f1f;
  --accent-text: #ffffff;
  --highlight: var(--star-gazer);
  --link: var(--mars);
  --link-hover: #b21717;
  --focus-ring: rgba(var(--mars-rgb), 0.35);
  --header-bg: var(--galaxy);
  --header-text: var(--nebula);
  --footer-bg: var(--galaxy);
  --footer-text: var(--nebula);
}

/* Dark theme */
[data-theme="dark"] {
  --bg: var(--galaxy);
  --bg-alt: #1a172a;
  --bg-raised: #221f33;
  --bg-input: #1a172a;
  --surface: #1f1c30;
  --surface-hover: #2a2740;
  --border: #322f47;
  --border-strong: #4a4663;
  --text: var(--nebula);
  --text-muted: #b8b6c4;
  --text-faint: #8a8792;
  --accent: var(--mars);
  --accent-hover: #ff4747;
  --accent-text: #ffffff;
  --highlight: var(--star-gazer);
  --link: #ff7878;
  --link-hover: var(--mars);
  --focus-ring: rgba(var(--mars-rgb), 0.5);
  --header-bg: #0d0a18;
  --header-text: var(--nebula);
  --footer-bg: #0d0a18;
  --footer-text: var(--nebula);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--galaxy);
    --bg-alt: #1a172a;
    --bg-raised: #221f33;
    --bg-input: #1a172a;
    --surface: #1f1c30;
    --surface-hover: #2a2740;
    --border: #322f47;
    --border-strong: #4a4663;
    --text: var(--nebula);
    --text-muted: #b8b6c4;
    --text-faint: #8a8792;
    --link: #ff7878;
    --link-hover: var(--mars);
    --focus-ring: rgba(var(--mars-rgb), 0.5);
    --header-bg: #0d0a18;
    --footer-bg: #0d0a18;
  }
}