@import "tailwindcss";

@theme inline {
  /* Runwell Era 6 External */
  --color-rw-ember: #E8420E;
  --color-rw-ember-hover: #FF4D1A;
  --color-rw-paper: #FAF8F6;
  --color-rw-paper-card: #FFFFFF;
  --color-rw-ink: #1A1614;
  --color-rw-ink2: #4A4540;
  --color-rw-muted: #9B9590;
  --color-rw-border: #EBE8E3;

  /* Tenant slots (overridden per client via inline style) */
  --color-tenant-primary: #2E8A60;
  --color-tenant-primary-hover: #267350;
  --color-tenant-accent: #CDAF58;
  --color-tenant-contrast: #FFFFFF;
  --color-tenant-deep: #12211A;

  /* Font families */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
}

/* Flywheel + Ecosystem + Calculator CSS module variables.
   CSS modules scope :root, so these must live here globally. */
:root {
  /* Runwell Era 6 External (used by all component CSS modules) */
  --rw-ember: #E8420E;
  --rw-ember-hover: #FF4D1A;
  --rw-ember-dim: rgba(232, 66, 14, 0.08);
  --rw-ember-edge: rgba(232, 66, 14, 0.32);
  --rw-paper: #FAF8F6;
  --rw-paper-card: #FFFFFF;
  --rw-paper-warm: #FFF5F0;
  --rw-ink: #1A1614;
  --rw-ink-2: #4A4540;
  --rw-muted: #9B9590;
  --rw-border: #EBE8E3;

  /* Tenant (overridden per client via inline style on [client]/layout.tsx) */
  --tenant-primary: #2E8A60;
  --tenant-primary-hover: #267350;
  --tenant-accent: #CDAF58;
  --tenant-contrast: #FFFFFF;
  --tenant-deep: #12211A;

  /* Fonts */
  --font-runwell: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-tenant: 'Space Grotesk', 'Inter', sans-serif;

  /* Flywheel type sizes */
  --t-h1: 42px;
  --t-eyebrow: 11px;
  --t-engine-corner: 11px;
  --t-engine-num: 38px;
  --t-engine-title: 22px;
  --t-engine-bullet: 13px;
  --t-bubble-label: 9.5px;
  --t-bubble-glyph: 16px;
  --t-bubble-text: 13px;
  --t-tenant-name: 24px;
  --t-tenant-tagline: 13px;
  --t-tenant-eyebrow: 10px;
  --t-foot-caption: 14px;
  --t-foot-mark: 10.5px;

  /* Flywheel spacing */
  --card-pt: 28px;
  --card-pr: 24px;
  --card-pb: 28px;
  --card-pl: 24px;
  --bubble-py: 24px;
  --bubble-px: 20px;
  --bubble-text-max: 150px;

  /* Flywheel radius */
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Ecosystem tokens */
  --rw-primary: #E8420E;
  --rw-primary-hover: #FF4D1A;
  --rw-primary-edge: rgba(232, 66, 14, 0.25);
  --rw-primary-glow: rgba(232, 66, 14, 0.08);
  --rw-surface: #FFFFFF;
  --rw-bg: #FAF8F6;
  --rw-text: #1A1614;
  --rw-text-2: #4A4540;
  --rw-text-muted: #9B9590;
  --vd-emerald: #2E8A60;
  --vd-emerald-hover: #267350;
  --vd-emerald-edge: rgba(46, 138, 96, 0.25);
  --vd-cream: #F0FAF5;
  --vd-gold: #CDAF58;

  /* Ecosystem shadows */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 20px 50px rgba(28, 25, 23, 0.09), 0 8px 16px rgba(28, 25, 23, 0.05);
  --shadow-rw: 0 0 0 1px var(--rw-primary-edge), 0 20px 50px rgba(255, 107, 53, 0.12);
  --shadow-vd: 0 0 0 1px var(--vd-emerald-edge), 0 20px 50px rgba(46, 138, 96, 0.1);

  /* Ecosystem radius */
  --eco-r-sm: 6px;
  --eco-r-md: 10px;
  --eco-r-lg: 14px;
  --eco-r-xl: 18px;
  --eco-r-full: 999px;
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  ::selection {
    background-color: var(--color-rw-ember);
    color: white;
  }
}

@layer components {
  .accent {
    color: var(--color-rw-ember);
  }

  .section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
  }

  /* Ecosystem + Calculator were designed for wider containers.
     The section element itself carries the id, not a child. */
  .section-container#ecosystem,
  .section-container#calculator {
    max-width: 1400px;
  }

  @media (max-width: 768px) {
    .section-container {
      padding: 3rem 1rem;
    }
    /* Ecosystem + Calculator: remove wide override on mobile */
    .section-container#ecosystem,
    .section-container#calculator {
      max-width: 100%;
    }
  }

  /* Page-level protection: disable text selection */
  .deck-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  /* Diagonal repeating watermark: pure CSS background, no DOM elements needed.
     Works reliably at any section height. The SVG is embedded as a data URI
     with the text rotated -35deg. Tile size 500x200 gives good density. */
  .preview-watermark-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 500px 200px;
  }

  /* Print overlay: stamp PREVIEW on every printed page */
  @media print {
    body::after {
      content: "CONFIDENTIAL PREVIEW";
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-35deg);
      font-family: var(--font-display);
      font-size: 120px;
      font-weight: 900;
      letter-spacing: 0.2em;
      color: rgba(232, 66, 14, 0.12);
      pointer-events: none;
      z-index: 9999;
    }
  }
}