/* Shared design tokens — aligned with fisagency / prompts */
:root,
[data-theme="light"] {
  color-scheme: light;

  --body-display: #626d86;
  --pinstripe: rgba(136, 158, 168, 0.2);
  --grey: #eef0f6;
  --black: #111729;
  --blue-fisagency: #2c457d;
  --shaddow: rgba(41, 43, 78, 0.07);
  --orange-red: #ff4b27;

  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #eef0f6;
  --surface-elevated: #ffffff;
  --border-subtle: rgba(136, 158, 168, 0.18);
  --border-soft: rgba(136, 158, 168, 0.28);
  --shadow-sm: 0 12px 26px rgba(41, 43, 78, 0.06);
  --shadow-md: 0 18px 38px rgba(41, 43, 78, 0.08);
  --shadow-lg: 0 24px 56px rgba(41, 43, 78, 0.1);
  --shadow-accent: 0 12px 24px rgba(17, 23, 41, 0.16);
  --glow-accent: 0 0 0 1px rgba(44, 69, 125, 0.12);

  --library-bg: linear-gradient(180deg, rgba(249, 250, 252, 0.98) 0%, #ffffff 100%);
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 248, 251, 0.92) 100%);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 252, 0.98) 100%);
  --footer-bg: linear-gradient(180deg, #ffffff 0%, rgba(244, 246, 250, 0.78) 100%);
  --hero-fade-bottom: linear-gradient(180deg, rgba(17, 23, 41, 0) 0%, rgba(247, 248, 251, 0.78) 100%);
  --shell-tool-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 100%);
  --shell-tool-cover-bg: linear-gradient(135deg, rgba(10, 16, 31, 0.72) 0%, rgba(30, 49, 89, 0.6) 100%);
  --shell-tool-cover-border: rgba(255, 255, 255, 0.12);
  --shell-tool-cover-shadow: 0 24px 64px rgba(8, 12, 24, 0.24);
  --shell-tool-brand-color: #ffffff;
  --shell-tool-brand-muted: rgba(255, 255, 255, 0.72);
  --shell-tool-nav-border: rgba(255, 255, 255, 0.08);
  --shell-tool-nav-bg: rgba(255, 255, 255, 0.06);
  --shell-tool-nav-link-color: rgba(255, 255, 255, 0.8);
  --shell-tool-nav-link-hover-color: #ffffff;
  --shell-tool-nav-link-hover-bg: rgba(255, 255, 255, 0.08);
  --shell-tool-nav-link-active-color: #ffffff;
  --shell-tool-nav-link-active-bg: rgba(255, 255, 255, 0.14);
  --shell-tool-nav-link-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shell-tool-prompts-border: rgba(255, 255, 255, 0.14);
  --shell-tool-prompts-color: rgba(255, 255, 255, 0.92);
  --shell-tool-prompts-bg: rgba(255, 255, 255, 0.06);
  --shell-tool-prompts-hover-bg: rgba(255, 255, 255, 0.12);
  --shell-tool-prompts-hover-color: #ffffff;
  --shell-tool-toggle-border: rgba(255, 255, 255, 0.14);
  --shell-tool-toggle-bg: rgba(255, 255, 255, 0.08);
  --shell-tool-toggle-color: rgba(255, 255, 255, 0.92);
  --shell-tool-toggle-hover-bg: rgba(255, 255, 255, 0.14);
  --shell-tool-toggle-hover-border: rgba(255, 255, 255, 0.2);
  --shell-cta-bg: #ffffff;
  --shell-cta-color: #111729;
  --shell-cta-border: rgba(255, 255, 255, 0.12);
  --shell-cta-shadow: 0 8px 20px rgba(7, 11, 23, 0.14);
  --shell-cta-shadow-hover: 0 10px 24px rgba(7, 11, 23, 0.18);
  --hero-btn-primary-bg: #ffffff;
  --hero-btn-primary-color: #111729;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-shell: 32px;
  --r-pill: 999px;
  --ring: 0 0 0 4px rgba(44, 69, 125, 0.08);
  --t-fast: 150ms;
  --t-med: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --calc-font: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --calc-accent: var(--blue-fisagency);
  --calc-accent-hover: #1e3159;
  --calc-accent-muted: rgba(44, 69, 125, 0.08);
  --calc-success: #0f766e;
  --calc-warn: #b45309;
  --white: #ffffff;

  --accent-gradient: linear-gradient(135deg, #111729 0%, #2c457d 100%);
  --accent-gradient-hover: linear-gradient(135deg, #0a1020 0%, #1e3159 100%);
  --hero-gradient:
    radial-gradient(circle at top left, rgba(44, 69, 125, 0.42), transparent 40%),
    radial-gradient(circle at right center, rgba(255, 75, 39, 0.16), transparent 30%),
    linear-gradient(135deg, #111729 0%, #1e3159 56%, #2c457d 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --black: #f1f5f9;
    --body-display: #94a3b8;
    --grey: #1e293b;
    --white: var(--surface-2);
    --blue-fisagency: #8ab4ff;
    --calc-accent: #8ab4ff;
    --calc-accent-hover: #a8c4ff;
    --calc-accent-muted: rgba(138, 180, 255, 0.12);
    --surface: #030712;
    --surface-2: #0f172a;
    --surface-3: #1e293b;
    --surface-elevated: #121826;
    --pinstripe: rgba(241, 245, 249, 0.1);
    --shaddow: rgba(0, 0, 0, 0.35);
    --border-subtle: rgba(241, 245, 249, 0.08);
    --border-soft: rgba(241, 245, 249, 0.14);
    --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 12px 28px rgba(0, 0, 0, 0.35);
    --ring: 0 0 0 4px rgba(138, 180, 255, 0.14);
    --library-bg: linear-gradient(180deg, #0f172a 0%, #030712 100%);
    --panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 28, 0.95) 100%);
    --card-bg: linear-gradient(180deg, rgba(18, 24, 38, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    --footer-bg: linear-gradient(180deg, #030712 0%, #0f172a 100%);
    --hero-fade-bottom: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, #0f172a 100%);
    --shell-tool-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0) 100%);
    --shell-tool-cover-bg: linear-gradient(135deg, rgba(10, 16, 31, 0.92) 0%, rgba(30, 49, 89, 0.88) 100%);
    --shell-tool-cover-border: rgba(255, 255, 255, 0.12);
    --shell-tool-cover-shadow: 0 24px 64px rgba(8, 12, 24, 0.24);
    --shell-tool-brand-color: #ffffff;
    --shell-tool-brand-muted: rgba(255, 255, 255, 0.72);
    --shell-tool-nav-border: rgba(255, 255, 255, 0.08);
    --shell-tool-nav-bg: rgba(255, 255, 255, 0.06);
    --shell-tool-nav-link-color: rgba(255, 255, 255, 0.8);
    --shell-tool-nav-link-hover-color: #ffffff;
    --shell-tool-nav-link-hover-bg: rgba(255, 255, 255, 0.08);
    --shell-tool-nav-link-active-color: #ffffff;
    --shell-tool-nav-link-active-bg: rgba(255, 255, 255, 0.14);
    --shell-tool-nav-link-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shell-tool-prompts-border: rgba(255, 255, 255, 0.14);
    --shell-tool-prompts-color: rgba(255, 255, 255, 0.92);
    --shell-tool-prompts-bg: rgba(255, 255, 255, 0.06);
    --shell-tool-prompts-hover-bg: rgba(255, 255, 255, 0.12);
    --shell-tool-prompts-hover-color: #ffffff;
    --shell-tool-toggle-border: rgba(255, 255, 255, 0.14);
    --shell-tool-toggle-bg: rgba(255, 255, 255, 0.08);
    --shell-tool-toggle-color: rgba(255, 255, 255, 0.92);
    --shell-tool-toggle-hover-bg: rgba(255, 255, 255, 0.14);
    --shell-tool-toggle-hover-border: rgba(255, 255, 255, 0.2);
    --accent-gradient: linear-gradient(135deg, #111729 0%, #2c457d 100%);
    --hero-gradient:
      radial-gradient(circle at top left, rgba(44, 69, 125, 0.5), transparent 40%),
      radial-gradient(circle at right center, rgba(255, 75, 39, 0.1), transparent 30%),
      linear-gradient(135deg, #030712 0%, #111729 56%, #1e3159 100%);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --black: #f1f5f9;
  --body-display: #94a3b8;
  --grey: #1e293b;
  --white: var(--surface-2);
  --blue-fisagency: #8ab4ff;
  --calc-accent: #8ab4ff;
  --calc-accent-hover: #a8c4ff;
  --calc-accent-muted: rgba(138, 180, 255, 0.12);
  --surface: #030712;
  --surface-2: #0f172a;
  --surface-3: #1e293b;
  --surface-elevated: #121826;
  --pinstripe: rgba(241, 245, 249, 0.1);
  --shaddow: rgba(0, 0, 0, 0.35);
  --border-subtle: rgba(241, 245, 249, 0.08);
  --border-soft: rgba(241, 245, 249, 0.14);
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 12px 28px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 4px rgba(138, 180, 255, 0.14);
  --library-bg: linear-gradient(180deg, #0f172a 0%, #030712 100%);
  --panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 28, 0.95) 100%);
  --card-bg: linear-gradient(180deg, rgba(18, 24, 38, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  --footer-bg: linear-gradient(180deg, #030712 0%, #0f172a 100%);
  --hero-fade-bottom: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, #0f172a 100%);
  --shell-tool-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0) 100%);
  --shell-tool-cover-bg: linear-gradient(135deg, rgba(10, 16, 31, 0.92) 0%, rgba(30, 49, 89, 0.88) 100%);
  --shell-tool-cover-border: rgba(255, 255, 255, 0.12);
  --shell-tool-cover-shadow: 0 24px 64px rgba(8, 12, 24, 0.24);
  --shell-tool-brand-color: #ffffff;
  --shell-tool-brand-muted: rgba(255, 255, 255, 0.72);
  --shell-tool-nav-border: rgba(255, 255, 255, 0.08);
  --shell-tool-nav-bg: rgba(255, 255, 255, 0.06);
  --shell-tool-nav-link-color: rgba(255, 255, 255, 0.8);
  --shell-tool-nav-link-hover-color: #ffffff;
  --shell-tool-nav-link-hover-bg: rgba(255, 255, 255, 0.08);
  --shell-tool-nav-link-active-color: #ffffff;
  --shell-tool-nav-link-active-bg: rgba(255, 255, 255, 0.14);
  --shell-tool-nav-link-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shell-tool-prompts-border: rgba(255, 255, 255, 0.14);
  --shell-tool-prompts-color: rgba(255, 255, 255, 0.92);
  --shell-tool-prompts-bg: rgba(255, 255, 255, 0.06);
  --shell-tool-prompts-hover-bg: rgba(255, 255, 255, 0.12);
  --shell-tool-prompts-hover-color: #ffffff;
  --shell-tool-toggle-border: rgba(255, 255, 255, 0.14);
  --shell-tool-toggle-bg: rgba(255, 255, 255, 0.08);
  --shell-tool-toggle-color: rgba(255, 255, 255, 0.92);
  --shell-tool-toggle-hover-bg: rgba(255, 255, 255, 0.14);
  --shell-tool-toggle-hover-border: rgba(255, 255, 255, 0.2);
  --accent-gradient: linear-gradient(135deg, #111729 0%, #2c457d 100%);
  --hero-gradient:
    radial-gradient(circle at top left, rgba(44, 69, 125, 0.5), transparent 40%),
    radial-gradient(circle at right center, rgba(255, 75, 39, 0.1), transparent 30%),
    linear-gradient(135deg, #030712 0%, #111729 56%, #1e3159 100%);
}