/**
 * SAI Secure - Brand Design Tokens
 * @see BRAND-STYLE-GUIDE.md
 *
 * Import once at the root of marketing pages, app shell, or email build pipeline.
 */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overglow';
  src: url('assets/fonts/OverglowFont-Demo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'P22 Spooky';
  src: url('assets/fonts/P22Spooky.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color: backgrounds ───────────────────────────────────────── */
  --color-bg-page: #0b0e14;
  --color-bg-page-marketing: #121212;
  --color-bg-surface: #161b22;
  --color-bg-surface-raised: #151921;
  --color-bg-surface-marketing: #000000;
  --color-bg-input: #1a1a1a;
  --color-bg-nav-active: rgba(168, 240, 224, 0.08);

  /* ── Color: borders ───────────────────────────────────────────── */
  --color-border-subtle: #2a3140;
  --color-border-marketing: rgba(232, 232, 232, 0.1);
  --color-border-glow: rgba(168, 240, 224, 0.35);

  /* ── Color: accents ───────────────────────────────────────────── */
  --color-accent-primary: #a8f0e0;
  --color-accent-primary-bright: #5eead4;
  --color-accent-primary-muted: #c5ebe3;
  --color-accent-secondary: #d682ff;
  --color-accent-secondary-bright: #f472b6;
  --color-accent-purple: #b388ff;

  /* Logo artwork colors - use inside PNG/SVG logos only, not UI chrome */
  --color-logo-sai: #66cdaa;
  --color-logo-script-pink: #d982d6;
  --color-logo-script-lavender: #a575bd;
  --color-logo-infected: #d65bd1;

  /* Copy / inline wordmark (emails, marketing body) */
  --color-brand-core-mint: #5fc4a4;
  --color-brand-core-pink: #d982d6;
  --color-brand-sai-copy: #5fc4a4;
  --color-brand-swipe-copy: #d982d6;
  --color-brand-name-copy: #5fc4a4;

  /* SAI Summer campaign sub-brand */
  --color-summer-mint: #a8e6cf;
  --color-summer-lavender: #c8a2c8;
  --color-summer-pink: #f0a0c0;
  --color-summer-teal: #2a9d8f;
  --color-summer-orange: #f4a261;
  --color-summer-bg: #1a3a2a;

  /* ── Color: data visualization ──────────────────────────────── */
  --color-viz-mint: #5eead4;
  --color-viz-blue: #58a6ff;
  --color-viz-purple: #b388ff;
  --color-viz-magenta: #f472b6;
  --color-viz-amber: #fbbf24;
  --color-viz-coral: #f87171;

  /* ── Color: text ──────────────────────────────────────────────── */
  --color-text-primary: #ffffff;
  --color-text-body: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted: #9ca3af;
  --color-text-on-accent: #0b0e14;
  --color-text-link: #a8f0e0;
  --color-text-link-alt: #d682ff;

  /* ── Color: semantic status ───────────────────────────────────── */
  --color-status-success: #5eead4;
  --color-status-info: #b388ff;
  --color-status-warning: #fbbf24;
  --color-status-critical: #f87171;
  --color-status-neutral: #8b949e;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Dancing Script', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-overglow: 'Overglow', 'Bebas Neue', Impact, sans-serif;
  --font-spooky: 'P22 Spooky', cursive;

  --font-size-xs: 0.625rem;   /* 10px */
  --font-size-sm: 0.75rem;    /* 12px */
  --font-size-base: 0.875rem; /* 14px */
  --font-size-md: 0.9375rem;  /* 15px */
  --font-size-lg: 1rem;       /* 16px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-display: clamp(1.5rem, 3.5vw, 2rem);
  --font-size-hero: clamp(2rem, 5vw, 2.75rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-body: 1.65;
  --line-height-dense: 1.4;

  --letter-spacing-caps: 0.08em;
  --letter-spacing-heading: 0.02em;

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

  /* ── Layout ───────────────────────────────────────────────────── */
  --layout-max-width: 1200px;
  --layout-gutter: 40px;
  --layout-gutter-mobile: 20px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ── Effects ──────────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #5eead4 0%, #d682ff 100%);
  --glow-mint: 0 0 12px rgba(94, 234, 212, 0.45);
  --glow-purple: 0 0 12px rgba(214, 130, 255, 0.35);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* ── Base resets (optional - include if not using a framework) ─── */

.sai-body {
  background-color: var(--color-bg-page-marketing);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sai-app-body {
  background-color: var(--color-bg-page);
}

/* ── Utility classes ───────────────────────────────────────────── */

.sai-heading-display {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.sai-heading-section {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.sai-label-caps {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.sai-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}

.sai-card-marketing {
  background: var(--color-bg-surface-marketing);
  border: 1px solid var(--color-border-marketing);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

.sai-panel-app {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sai-btn-primary {
  display: inline-block;
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sai-btn-primary:hover {
  background: var(--color-accent-primary-bright);
}

.sai-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 12px 30px;
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.sai-btn-ghost:hover {
  background: var(--color-text-primary);
  color: var(--color-bg-surface-marketing);
}

.sai-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sai-tag--active {
  color: var(--color-status-success);
  border: 1px solid var(--color-status-success);
  background: rgba(94, 234, 212, 0.12);
}

.sai-tag--alpha {
  color: var(--color-status-info);
  border: 1px solid var(--color-status-info);
  background: rgba(179, 136, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}