/* Qaptic landing — design tokens shared across the 3 directions
   Loaded once at the top of the canvas; each direction overrides where needed */

:root {
  /* CANVAS / SURFACE */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f4ef;
  --color-surface-tile-1: #1d1d1f;
  --color-surface-tile-2: #2a2a2e;
  --color-hairline: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.18);

  /* INK */
  --color-ink: #1d1d1f;
  --color-ink-muted-80: #4a4a4f;
  --color-ink-muted-48: #86868b;
  --color-body-muted: rgba(255, 255, 255, 0.72);

  /* ACTION */
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-pos: #1a8754;
  --color-neg: #c12a2a;
  --color-warn: #a8740b;

  /* TYPE */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* TYPE SCALES — encoded as `font:` shorthand for clean composition */
  --t-hero-display:    600 56px/1.05 var(--font-display);
  --t-hero-display-track: -0.022em;

  --t-display-lg:      600 36px/1.1 var(--font-display);
  --t-display-lg-track: -0.018em;

  --t-display-md:      600 22px/1.25 var(--font-display);
  --t-display-md-track: -0.012em;

  --t-tagline:         600 14px/1.3 var(--font-sans);
  --t-tagline-track:   0.04em;

  --t-lead:            400 18px/1.45 var(--font-sans);
  --t-lead-track:      -0.005em;

  --t-lead-airy:       400 17px/1.6 var(--font-sans);
  --t-lead-airy-track: 0.005em;

  --t-body:            400 15px/1.5 var(--font-sans);
  --t-body-track:      -0.003em;

  --t-body-strong:     600 15px/1.5 var(--font-sans);
  --t-body-strong-track: -0.003em;

  --t-caption:         400 13px/1.45 var(--font-sans);
  --t-caption-track:   0;

  --t-caption-strong:  600 13px/1.45 var(--font-sans);
  --t-caption-strong-track: 0.005em;

  --t-fine-print:      500 11px/1.4 var(--font-sans);
  --t-fine-print-track: 0.06em;

  --t-nav-link:        500 13px/1 var(--font-sans);
  --t-nav-link-track:  -0.002em;

  --t-button-utility:  500 14px/1 var(--font-sans);
  --t-button-utility-track: -0.003em;

  --t-dense-link:      400 14px/1.7 var(--font-sans);
  --t-dense-link-track: -0.002em;
}

/* Page baseline */
html, body { background: #ffffff; color: var(--color-ink); margin: 0; }
body { font: var(--t-body); letter-spacing: var(--t-body-track); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }

/* Common chrome */
.btn-primary { background: var(--color-primary); color: #fff; padding: 11px 22px; border-radius: 9999px; font: var(--t-body-strong); letter-spacing: var(--t-body-strong-track); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn { transition: filter 160ms ease-out; }
.btn:hover { filter: brightness(0.94); }
.product-shadow { box-shadow: 0 30px 80px -10px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.06); }

@keyframes qPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.6; }
}
@keyframes qDraw {
  to { stroke-dashoffset: 0; }
}