/* ============================================================
   Stratosfyre Design System — Colors & Type
   Derived from kyle886/stratosfyre-pitch-studio (src/index.css,
   tailwind.config.ts). Colors are HSL. The brand is
   dark-first with a signature "horizon" orange glow.
   ============================================================ */

/* IBM Plex Sans/Mono — the CFO-friendly institutional typeface the app
   actually renders (see the "TONED-DOWN OVERRIDES" block in app.css). Loaded
   here so typography is consistent across every viewer's machine rather than
   falling back to each OS's system-ui. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     TYPOGRAPHY — base
     ========================================================= */
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.15;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;

  /* =========================================================
     COLOR — Dark theme (default brand surface)
     Stratosfyre is dark-first: deep space blue-black background
     with a warm orange "horizon" accent. Numbers are raw HSL
     tokens; wrap in hsl(var(--x)) where used.
     ========================================================= */

  /* Surfaces — cosmic blue-black stack */
  --c-background:     220 25% 6%;   /* near-black, slight blue */
  --c-surface-deep:   220 20% 4%;   /* behind the main stage */
  --c-card:           220 20% 10%;
  --c-card-elevated:  220 18% 12%;
  --c-popover:        220 20% 10%;
  --c-muted:          220 15% 18%;

  /* Text */
  --c-foreground:       210 40% 98%;  /* near-white */
  --c-foreground-muted: 215 15% 68%;  /* secondary text — raised for dark-mode readability */
  --c-foreground-subtle:220 10% 55%;

  /* Brand — Horizon orange/amber */
  --c-primary:       25 95% 55%;    /* signature orange */
  --c-primary-fg:    220 25% 6%;    /* black-on-orange */
  --c-primary-glow:  25 100% 65%;
  --c-horizon-orange:24 95% 53%;
  --c-horizon-amber: 32 95% 55%;
  --c-horizon-glow:  24 100% 60%;

  /* Secondary — cool sky blue */
  --c-secondary:    210 80% 55%;
  --c-secondary-fg: 210 40% 98%;
  --c-skyblue:      199 89% 48%;

  /* Accent (dark-mode = tinted horizon) */
  --c-accent:    25 90% 50%;
  --c-accent-fg: 220 25% 6%;

  /* Borders & inputs */
  --c-border:        220 15% 20%;
  --c-border-subtle: 220 15% 15%;
  --c-input:         220 15% 18%;
  --c-ring:          25 95% 55%;

  /* Semantic */
  --c-success:    142 76% 46%;
  --c-success-fg: 220 25% 6%;
  --c-warning:    45 93% 58%;
  --c-warning-fg: 220 25% 6%;
  --c-destructive:0 72% 51%;
  --c-destructive-fg: 210 40% 98%;
  --c-info:       200 98% 50%;
  --c-info-fg:    220 25% 6%;

  /* Module palette — 12-slot color-coded badge system
     used by the slide module badges. */
  --c-module-a: 200 85% 55%;   /* sky */
  --c-module-b: 142 70% 45%;   /* green */
  --c-module-c: 270 70% 60%;   /* violet */
  --c-module-d: 330 75% 55%;   /* magenta */
  --c-module-e: 45 90% 50%;    /* gold */
  --c-module-f: 175 70% 45%;   /* teal */
  --c-module-g: 15 80% 55%;    /* ember */
  --c-module-h: 250 70% 60%;   /* indigo */
  --c-module-i: 190 80% 45%;   /* cyan */
  --c-module-j: 350 75% 55%;   /* rose */
  --c-module-k: 160 65% 45%;   /* jade */
  --c-module-l: 280 65% 55%;   /* plum */

  /* =========================================================
     GRADIENTS
     ========================================================= */
  --grad-horizon: linear-gradient(135deg,
                  hsl(25 95% 55%) 0%,
                  hsl(35 90% 50%) 50%,
                  hsl(15 90% 45%) 100%);
  --grad-cosmic:  linear-gradient(180deg,
                  hsl(220 25% 6%) 0%,
                  hsl(220 30% 12%) 100%);
  --grad-glow:    radial-gradient(ellipse at center,
                  hsl(25 95% 55% / 0.15) 0%, transparent 70%);
  --grad-card:    linear-gradient(135deg,
                  hsl(220 20% 12%) 0%, hsl(220 20% 10%) 100%);
  --grad-glass:   linear-gradient(135deg,
                  hsl(220 20% 15% / 0.6) 0%, hsl(220 20% 10% / 0.4) 100%);
  --grad-hero:    linear-gradient(135deg,
                  hsl(25 95% 55% / 0.15) 0%,
                  hsl(270 70% 60% / 0.10) 50%,
                  hsl(200 85% 55% / 0.10) 100%);
  --grad-hero-text: linear-gradient(180deg,
                  hsl(0 0% 100%) 0%,
                  hsl(220 10% 70%) 50%,
                  hsl(24 95% 55%) 100%);
  --grad-horizon-floor: radial-gradient(
                  ellipse 120% 50% at center bottom,
                  hsl(24 100% 50% / 0.15) 0%,
                  hsl(24 100% 45% / 0.08) 20%,
                  hsl(24 100% 40% / 0.03) 40%,
                  transparent 70%);

  /* =========================================================
     SHADOWS & GLOWS — dark theme
     ========================================================= */
  --shadow-sm:       0 2px 8px  hsl(220 25% 0% / 0.3);
  --shadow-md:       0 4px 16px hsl(220 25% 0% / 0.4);
  --shadow-lg:       0 8px 32px hsl(220 25% 0% / 0.5);
  --shadow-xl:       0 12px 48px hsl(220 25% 0% / 0.6);
  --shadow-glow-sm:  0 0 20px hsl(25 95% 55% / 0.15);
  --shadow-glow:     0 0 40px hsl(25 95% 55% / 0.25);
  --shadow-glow-lg:  0 0 60px hsl(25 95% 55% / 0.35);

  /* =========================================================
     RADII & SPACING & MOTION
     ========================================================= */
  --radius:       0.75rem;   /* 12px — "lg" in config */
  --radius-sm:    calc(var(--radius) - 4px);
  --radius-md:    calc(var(--radius) - 2px);
  --radius-lg:    var(--radius);
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-full:  9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Signature easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
}

.dark {
  /* Explicit dark marker — colors inherited from :root.
     Prevents html:not(.dark):not(.light) from matching in auto mode. */
}

/* =========================================================
   AUTO LIGHT THEME — when system prefers light and no explicit class set
   ========================================================= */
@media (prefers-color-scheme: light) {
  html:not(.dark):not(.light) {
    --c-background:    0 0% 100%;
    --c-surface-deep:  210 40% 98%;
    --c-card:          0 0% 100%;
    --c-card-elevated: 210 40% 98%;
    --c-popover:       0 0% 100%;
    --c-muted:         210 40% 96%;

    --c-foreground:       222 47% 11%;
    --c-foreground-muted: 215 16% 47%;
    --c-foreground-subtle:215 16% 55%;

    --c-primary:      25 95% 50%;
    --c-primary-fg:   0 0% 100%;
    --c-primary-glow: 25 100% 60%;

    --c-secondary:    210 80% 50%;
    --c-secondary-fg: 0 0% 100%;

    --c-accent:    25 90% 95%;
    --c-accent-fg: 25 95% 40%;

    --c-border:        214 32% 91%;
    --c-border-subtle: 214 32% 95%;
    --c-input:         214 32% 91%;
    --c-ring:          25 95% 50%;

    --c-success:    142 76% 25%;
    --c-success-fg: 0 0% 100%;
    --c-warning:    38 92% 42%;
    --c-warning-fg: 0 0% 100%;
    --c-destructive:0 72% 50%;
    --c-destructive-fg: 0 0% 100%;
    --c-info:       199 80% 42%;
    --c-info-fg:    0 0% 100%;

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
    --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
    --shadow-lg: 0 10px 15px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 20px 25px hsl(0 0% 0% / 0.1);

    --grad-card: linear-gradient(135deg, hsl(210 40% 99%) 0%, hsl(210 40% 97%) 100%);
    --grad-glass: linear-gradient(135deg, hsl(0 0% 100% / 0.85) 0%, hsl(0 0% 100% / 0.65) 100%);
  }
}

/* =========================================================
   LIGHT THEME — Explicit toggle
   ========================================================= */
.light {
  --c-background:    0 0% 100%;
  --c-surface-deep:  210 40% 98%;
  --c-card:          0 0% 100%;
  --c-card-elevated: 210 40% 98%;
  --c-popover:       0 0% 100%;
  --c-muted:         210 40% 96%;

  --c-foreground:       222 47% 11%;
  --c-foreground-muted: 215 16% 47%;
  --c-foreground-subtle:215 16% 55%;

  --c-primary:      25 95% 50%;
  --c-primary-fg:   0 0% 100%;
  --c-primary-glow: 25 100% 60%;

  --c-secondary:    210 80% 50%;
  --c-secondary-fg: 0 0% 100%;

  --c-accent:    25 90% 95%;
  --c-accent-fg: 25 95% 40%;

  --c-border:        214 32% 91%;
  --c-border-subtle: 214 32% 95%;
  --c-input:         214 32% 91%;
  --c-ring:          25 95% 50%;

  --c-success:    142 76% 25%;
  --c-success-fg: 0 0% 100%;
  --c-warning:    38 92% 42%;
  --c-warning-fg: 0 0% 100%;
  --c-destructive:0 72% 50%;
  --c-destructive-fg: 0 0% 100%;
  --c-info:       199 80% 42%;
  --c-info-fg:    0 0% 100%;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
  --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
  --shadow-lg: 0 10px 15px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 20px 25px hsl(0 0% 0% / 0.1);

  --grad-card: linear-gradient(135deg, hsl(210 40% 99%) 0%, hsl(210 40% 97%) 100%);
  --grad-glass: linear-gradient(135deg, hsl(0 0% 100% / 0.85) 0%, hsl(0 0% 100% / 0.65) 100%);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Headings and body both use IBM Plex Sans (display + sans tokens).
   ========================================================= */
html {
  font-family: var(--font-sans);
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-background));
  -webkit-font-smoothing: antialiased;
}

body { font-family: var(--font-sans); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h6, .h6 {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--c-foreground-muted));
}

p, .p-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: hsl(var(--c-foreground));
}
.p-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: hsl(var(--c-foreground-muted));
}
.p-small {
  font-size: var(--fs-14);
  color: hsl(var(--c-foreground-muted));
}
.p-micro {
  font-size: var(--fs-12);
  color: hsl(var(--c-foreground-muted));
  letter-spacing: 0.02em;
}

/* Signature "hero" gradient text used across Stratosfyre */
.text-gradient-hero {
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-horizon {
  background: var(--grad-horizon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: hsl(var(--c-muted));
  color: hsl(var(--c-foreground));
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--c-border));
  background: hsl(var(--c-muted));
  color: hsl(var(--c-foreground-muted));
}