/* ============================================
   BizHubby — Base Stylesheet
   Meta-inspired design system (see DESIGN.md)
   Reset + Custom Properties + Font Imports
   ============================================ */

/* --- Fonts: Inter as Optimistic VF substitute --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Design Tokens (Light / Canvas mode — Meta default) --- */
:root {
  /* Brand & Accent */
  --primary: #0064e0;          /* cobalt — buy-now CTAs only */
  --primary-deep: #0457cb;
  --primary-soft: #0091ff;
  --on-primary: #ffffff;
  --ink-button: #000000;       /* marketing primary CTA */
  --on-ink-button: #ffffff;
  --fb-blue: #1876f2;          /* input focus */
  --meta-link: #385898;

  /* Semantic */
  --success: #31a24c;
  --success-bg: #24e400;
  --attention: #f2a918;
  --warning: #f7b928;
  --warning-bg: #ffe200;
  --critical: #e41e3f;
  --critical-strong: #f0284a;

  /* Surface — light mode shifted very slightly toward cobalt */
  --canvas: #ffffff;
  --surface-soft: #eef3fb;
  --hairline: #c8d4e3;
  --hairline-soft: #dce5f1;

  /* Text */
  --ink-deep: #0a1317;
  --ink: #1c1e21;
  --charcoal: #444950;
  --slate: #4b4c4f;
  --steel: #5d6c7b;
  --stone: #8595a4;
  --disabled-text: #bcc0c4;

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing (4px base) */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  10px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl:40px;
  --space-section-sm: 48px;
  --space-section:    64px;
  --space-section-lg: 80px;
  --space-hero: 120px;

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-xxl: 24px;
  --r-xxxl: 32px;
  --r-feature: 40px;
  --r-full: 100px;
  --r-circle: 9999px;

  /* Container widths */
  --container-max: 1280px;
  --container-gutter: 32px;

  /* Elevation */
  --shadow-1: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
  --shadow-2: rgba(20, 22, 26, 0.3) 0px 1px 4px 0px;
  --shadow-promo: 0 20px 60px -20px rgba(0, 100, 224, 0.35);

  /* Motion */
  --t-fast: 150ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 360ms cubic-bezier(.2,.7,.2,1);

  color-scheme: light;
}

/* --- Dark mode override (opt-in) — deep navy with cobalt undertones --- */
:root[data-theme='dark'] {
  /* Surfaces — navy-shifted instead of pure black */
  --canvas: #050c14;
  --surface-soft: #0d1827;
  --hairline: #243246;
  --hairline-soft: #16223a;

  /* Text */
  --ink-deep: #ffffff;
  --ink: #e8eef7;
  --charcoal: #b9c4d4;
  --slate: #94a1b3;
  --steel: #6f7d92;
  --stone: #4f5b6e;
  --disabled-text: #3a4456;

  /* Primary stays cobalt but a touch brighter on dark surfaces */
  --primary: #2c8aff;
  --primary-deep: #0064e0;
  --primary-soft: #5cabff;

  /* Marketing CTA stays white-on-dark (Meta inverts in dark) */
  --ink-button: #ffffff;
  --on-ink-button: #050c14;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-promo: 0 30px 80px -20px rgba(44, 138, 255, 0.45);

  color-scheme: dark;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* --- Base body --- */
html, body { height: 100%; }
body {
  background:
    radial-gradient(circle at 0% 0%,   rgba(0, 100, 224, 0.06), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(0, 145, 255, 0.04), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(161, 33, 206, 0.04), transparent 50%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink-deep);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'ss02';
  overflow-x: hidden;
}

/* --- Selection --- */
::selection { background: var(--ink-deep); color: var(--canvas); }

/* --- Focus ring --- */
:focus-visible {
  outline: 2px solid var(--fb-blue);
  outline-offset: 2px;
  border-radius: var(--r-lg);
}

/* --- Reveal animation primitive --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal--visible { opacity: 1; transform: none; }

/* --- Screen-reader only --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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