/* ---------------------------------------------------------------------------
   Vstorm brand theme for full-stack-ai-agent-template HTML conversation exports.

   Maps the vstorm.co design system (scraped from /pydantic-development-services/
   and /ai-readiness-assessment/) onto the export's Tailwind v4 token layer.

   The export declares its tokens inside `@layer theme`. This file is UNLAYERED,
   so it wins the cascade regardless of source order. Nothing in the JS bundle
   is touched — every colour, chart, scrollbar, glow and gradient in the export
   derives from the variables below.

   vstorm.co palette:
     --v-red #fb3741  --v-ink #0a0f1a  --v-ink-60 #5a5f6e  --v-slate #8a8f9e
     --v-mist #c8ccd6 --v-cloud #e8eaf0 --v-snow #f4f5f8   --v-white #fafbfd
--------------------------------------------------------------------------- */

:root {
  /* Brand — #fb3741 decomposed into OKLCH parts.
     Must be set as l/c/h (not --color-brand) so that --color-brand-hover
     (calc(l - 8%)), --color-brand-muted (c * .4) and --color-chart stay in sync. */
  --brand-l: 64.6%;
  --brand-c: 0.229;
  --brand-h: 24.3;
  --color-brand-foreground: #fafbfd;

  /* Surfaces */
  --color-background: #fafbfd;          /* v-white  */
  --color-foreground: #0a0f1a;          /* v-ink    */
  --color-card: #ffffff;
  --color-card-foreground: #0a0f1a;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a0f1a;
  --color-primary: #0a0f1a;
  --color-primary-foreground: #fafbfd;
  --color-secondary: #f4f5f8;           /* v-snow   */
  --color-secondary-foreground: #0a0f1a;
  --color-muted: #f4f5f8;
  --color-muted-foreground: #5a5f6e;    /* v-ink-60 */
  --color-accent: #e8eaf0;              /* v-cloud  */
  --color-accent-foreground: #0a0f1a;
  --color-border: #e8eaf0;
  --color-input: #e8eaf0;

  /* Brand is red, so errors get a darker red to stay distinguishable. */
  --color-destructive: oklch(48% 0.19 27);
  --color-destructive-foreground: #fafbfd;

  /* Type — same three families and the same Google Fonts request the site makes */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-accent:  "Instrument Sans", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Radii — vstorm.co --r-* scale (4/6/8/12/16/20) */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius:     8px;
  --radius-pill: 9999px;

  /* Motion — vstorm.co already uses the identical ease-out/spring curves */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: .15s;
  --duration-base: .3s;
  --duration-slow: .6s;
}

/* Dark variant — kept working in case an export is regenerated as dark/system.
   Specificity 0,2,0 matches the export's own dark rules, so source order wins. */
:root.dark,
:root[data-theme="dark"] {
  --color-background: #0a0f1a;
  --color-foreground: #f4f5f8;
  --color-card: #121826;
  --color-card-foreground: #f4f5f8;
  --color-popover: #121826;
  --color-popover-foreground: #f4f5f8;
  --color-primary: #fafbfd;
  --color-primary-foreground: #0a0f1a;
  --color-secondary: #161d2c;
  --color-secondary-foreground: #f4f5f8;
  --color-muted: #161d2c;
  --color-muted-foreground: #8a8f9e;    /* v-slate */
  --color-accent: #1c2434;
  --color-accent-foreground: #f4f5f8;
  --color-border: #232a3a;
  --color-input: #232a3a;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-background: #0a0f1a;
    --color-foreground: #f4f5f8;
    --color-card: #121826;
    --color-card-foreground: #f4f5f8;
    --color-popover: #121826;
    --color-popover-foreground: #f4f5f8;
    --color-primary: #fafbfd;
    --color-primary-foreground: #0a0f1a;
    --color-secondary: #161d2c;
    --color-secondary-foreground: #f4f5f8;
    --color-muted: #161d2c;
    --color-muted-foreground: #8a8f9e;
    --color-accent: #1c2434;
    --color-accent-foreground: #f4f5f8;
    --color-border: #232a3a;
    --color-input: #232a3a;
  }
}

/* The export's display scale is built for a hero page, not an embedded panel.
   vstorm.co tops out at --type-display 4.5rem; clamp the export to match. */
:root .text-display-3xl { font-size: clamp(2.5rem, 6vw, 4.5rem); }
:root .text-display-2xl { font-size: clamp(2.25rem, 5vw, 3.5rem); }
:root .text-display-xl  { font-size: clamp(2rem, 4vw, 3rem); }

/* Embedded in an iframe the page owns the whole viewport — kill the outer
   margin the standalone export leaves for a browser window. */
html.vs-embedded, html.vs-embedded body { background: var(--color-background); }