/* =========================================================================
   MAMA — Shared theme tokens (landing + dashboard)
   Spec: docs/superpowers/specs/2026-08-05-mama-landing-polish-theme-design.md
   Single source of truth for colors, fonts, radii, spacing.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;

  /* Obsidian foundation */
  --bg-void: #08080c;
  --bg-primary: #0c0c12;
  --bg-elevated: #111118;
  --bg-card: rgba(16, 16, 24, 0.55);
  --bg-card-hover: rgba(22, 22, 34, 0.7);

  /* Text */
  --text-primary: #e8e4df;
  --text-secondary: #9a9490;
  --text-muted: #6e6862;

  /* Gold accent */
  --gold: #c9a961;
  --gold-soft: rgba(201, 169, 97, 0.12);
  --gold-border: rgba(201, 169, 97, 0.22);
  --gold-glow: rgba(201, 169, 97, 0.08);

  /* Soft accent (desaturated — not neon purple primary) */
  --accent: #8b7ec8;
  --accent-soft: rgba(139, 126, 200, 0.1);
  --accent-border: rgba(139, 126, 200, 0.15);

  --success: #6ec99a;
  --error: #d4766a;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(201, 169, 97, 0.18);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --font-hero:
    "Instrument Serif", "Plus Jakarta Sans", Georgia, "Times New Roman", serif;
  --font-body:
    "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --container-pad: clamp(20px, 5vw, 40px);
  --btn-h: 40px;
  --btn-h-lg: 46px;
  --btn-px: 18px;
  --btn-px-lg: 24px;
  --btn-fs: 14px;
  --nav-tab-gap: 32px;
  --nav-pad-y: 16px;

  /* Deloitte/EY-aligned type scale (ceiling 32px outside landing hero) */
  --type-page: clamp(1.5rem, 2.2vw, 1.75rem); /* ~24–28px */
  --type-section: 1.25rem; /* 20px */
  --type-nav: 0.8125rem; /* 13px */
  --type-body: 0.9375rem; /* 15px */
  --type-caption: 0.75rem; /* 12px */
  --type-page-max: 2rem; /* 32px hard ceiling for non-hero titles */

  --glow-card: 0 0 1px rgba(201, 169, 97, 0.15), 0 16px 64px rgba(0, 0, 0, 0.4);

  /* Scrim for intro overlay */
  --intro-scrim: rgba(8, 8, 12, 0.45);
  --hero-scrim: linear-gradient(
    to right,
    rgba(8, 8, 12, 0.42) 0%,
    rgba(8, 8, 12, 0.12) 38%,
    transparent 100%
  );
  --hero-scrim-mobile: linear-gradient(
    to top,
    rgba(8, 8, 12, 0.48) 0%,
    rgba(8, 8, 12, 0.14) 36%,
    rgba(8, 8, 12, 0.08) 100%
  );
  --hero-scrim-video:
    linear-gradient(
      to bottom,
      rgba(8, 8, 12, 0.55) 0%,
      rgba(8, 8, 12, 0.28) 42%,
      rgba(8, 8, 12, 0.72) 100%
    ),
    linear-gradient(to right, rgba(8, 8, 12, 0.35) 0%, transparent 55%);
  --hero-video-play-bg: color-mix(in srgb, var(--bg-void) 55%, transparent);
  --hero-video-play-border: color-mix(
    in srgb,
    var(--text-primary) 35%,
    transparent
  );
  --hero-video-play-fg: var(--text-primary);

  /* Legacy page aliases (packs / marketplace / dpa / developer) */
  --bg: var(--bg-void);
  --bg2: var(--bg-primary);
  --bg3: var(--bg-elevated);
  --cream: var(--text-primary);
  --text: var(--text-secondary);
  --muted: var(--text-muted);
  --dim: var(--border-subtle);
  --glass: var(--bg-card);
  --glass-border: var(--border-subtle);
  --gold-light: #e8d5a8;
  --gold-muted: var(--gold-soft);
  --green: var(--success);
  --blue: #4e7fcf;
  --purple: var(--accent);
  --coral: var(--error);
  --amber: #c4882a;
  --gradient-start: var(--gold);
  --gradient-mid: #d8bd7c;
  --gradient-end: #e6d2a2;
  --accent-cyan: var(--success);
  --nav-bg: color-mix(in srgb, var(--bg-void) 88%, transparent);
}

/* Explicit dark class (dashboard next-themes) */
html.dark,
:root.dark {
  color-scheme: dark;
}

/* System light */
@media (prefers-color-scheme: light) {
  :root:not(.dark) {
    color-scheme: light;

    --bg-void: #f7f5f1;
    --bg-primary: #ffffff;
    --bg-elevated: #f0ede8;
    --bg-card: rgba(255, 255, 255, 0.82);
    --bg-card-hover: rgba(255, 255, 255, 0.95);

    --text-primary: #1a1814;
    --text-secondary: #4a453f;
    --text-muted: #6b6560;

    --gold: #a8873a;
    --gold-soft: rgba(168, 135, 58, 0.12);
    --gold-border: rgba(168, 135, 58, 0.28);
    --gold-glow: rgba(168, 135, 58, 0.1);

    --accent: #6b5f9a;
    --accent-soft: rgba(107, 95, 154, 0.08);
    --accent-border: rgba(107, 95, 154, 0.18);

    --success: #2f9a6a;
    --error: #c45c52;

    --border-subtle: rgba(26, 24, 20, 0.08);
    --border-hover: rgba(168, 135, 58, 0.28);

    --glow-card:
      0 0 1px rgba(168, 135, 58, 0.12), 0 12px 40px rgba(26, 24, 20, 0.08);
    --intro-scrim: rgba(247, 245, 241, 0.55);
    --hero-scrim: linear-gradient(
      to right,
      rgba(247, 245, 241, 0.55) 0%,
      rgba(247, 245, 241, 0.22) 38%,
      transparent 100%
    );
    --hero-scrim-mobile: linear-gradient(
      to top,
      rgba(247, 245, 241, 0.58) 0%,
      rgba(247, 245, 241, 0.22) 36%,
      rgba(247, 245, 241, 0.12) 100%
    );
    --hero-scrim-video:
      linear-gradient(
        to bottom,
        rgba(247, 245, 241, 0.35) 0%,
        rgba(247, 245, 241, 0.12) 38%,
        rgba(247, 245, 241, 0.55) 100%
      ),
      linear-gradient(to right, rgba(247, 245, 241, 0.22) 0%, transparent 55%);
    --hero-video-play-bg: color-mix(in srgb, var(--bg-void) 55%, transparent);
    --hero-video-play-border: color-mix(
      in srgb,
      var(--text-primary) 35%,
      transparent
    );
    --hero-video-play-fg: var(--text-primary);

    --bg: var(--bg-void);
    --bg2: var(--bg-primary);
    --bg3: var(--bg-elevated);
    --cream: var(--text-primary);
    --text: var(--text-secondary);
    --muted: var(--text-muted);
    --dim: var(--border-subtle);
    --glass: var(--bg-card);
    --glass-border: var(--border-subtle);
    --gold-light: #c9a961;
    --gold-muted: var(--gold-soft);
    --green: var(--success);
    --blue: #3d6bb3;
    --purple: var(--accent);
    --coral: var(--error);
    --amber: #a8873a;
    --gradient-start: var(--gold);
    --gradient-mid: #c9a961;
    --gradient-end: #d8bd7c;
    --accent-cyan: var(--success);
    --nav-bg: color-mix(in srgb, var(--bg-void) 88%, transparent);
  }
}

/* Explicit light class */
html.light,
:root.light {
  color-scheme: light;

  --bg-void: #f7f5f1;
  --bg-primary: #ffffff;
  --bg-elevated: #f0ede8;
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-card-hover: rgba(255, 255, 255, 0.95);

  --text-primary: #1a1814;
  --text-secondary: #4a453f;
  --text-muted: #6b6560;

  --gold: #a8873a;
  --gold-soft: rgba(168, 135, 58, 0.12);
  --gold-border: rgba(168, 135, 58, 0.28);
  --gold-glow: rgba(168, 135, 58, 0.1);

  --accent: #6b5f9a;
  --accent-soft: rgba(107, 95, 154, 0.08);
  --accent-border: rgba(107, 95, 154, 0.18);

  --success: #2f9a6a;
  --error: #c45c52;

  --border-subtle: rgba(26, 24, 20, 0.08);
  --border-hover: rgba(168, 135, 58, 0.28);

  --glow-card:
    0 0 1px rgba(168, 135, 58, 0.12), 0 12px 40px rgba(26, 24, 20, 0.08);
  --intro-scrim: rgba(247, 245, 241, 0.55);
  --hero-scrim: linear-gradient(
    to right,
    rgba(247, 245, 241, 0.55) 0%,
    rgba(247, 245, 241, 0.22) 38%,
    transparent 100%
  );
  --hero-scrim-mobile: linear-gradient(
    to top,
    rgba(247, 245, 241, 0.58) 0%,
    rgba(247, 245, 241, 0.22) 36%,
    rgba(247, 245, 241, 0.12) 100%
  );
  --hero-scrim-video:
    linear-gradient(
      to bottom,
      rgba(247, 245, 241, 0.35) 0%,
      rgba(247, 245, 241, 0.12) 38%,
      rgba(247, 245, 241, 0.55) 100%
    ),
    linear-gradient(to right, rgba(247, 245, 241, 0.22) 0%, transparent 55%);
  --hero-video-play-bg: color-mix(in srgb, var(--bg-void) 55%, transparent);
  --hero-video-play-border: color-mix(
    in srgb,
    var(--text-primary) 35%,
    transparent
  );
  --hero-video-play-fg: var(--text-primary);

  --bg: var(--bg-void);
  --bg2: var(--bg-primary);
  --bg3: var(--bg-elevated);
  --cream: var(--text-primary);
  --text: var(--text-secondary);
  --muted: var(--text-muted);
  --dim: var(--border-subtle);
  --glass: var(--bg-card);
  --glass-border: var(--border-subtle);
  --gold-light: #c9a961;
  --gold-muted: var(--gold-soft);
  --green: var(--success);
  --blue: #3d6bb3;
  --purple: var(--accent);
  --coral: var(--error);
  --amber: #a8873a;
  --gradient-start: var(--gold);
  --gradient-mid: #c9a961;
  --gradient-end: #d8bd7c;
  --accent-cyan: var(--success);
  --nav-bg: color-mix(in srgb, var(--bg-void) 88%, transparent);
}