/* Canvas TapNow theme - core graphite palette tokens and scrollbars. Load first. */

/*
 * TapNow v2.13.14 parameter-mapped Canvas visual layer.
 *
 * This file is intentionally appearance-only and scoped to `.canvas-page`.
 * Geometry, stacking, hit targets, transforms, and Canvas behavior remain owned
 * by the existing component styles and renderer code.
 */

/* Core graphite palette and motion.
   Aligned to the public homepage / Create TapNow palette: a near-black field
   (#0a0a0a) with darker, refined surfaces that recede so real media carries
   the color. Floating surfaces (toolbar, panels) sit at #1d1d1d, one step
   above the field, mirroring the homepage's floating composer. */
.canvas-page {
  --canvas-bg: #0a0a0a;
  --canvas-bg-deep: #0f0f0f;
  --canvas-surface: #1f1f1f;
  --canvas-surface-raised: #262626;
  --canvas-surface-float: #1d1d1d;
  --canvas-surface-soft: rgba(255, 255, 255, 0.05);
  --canvas-surface-hover: rgba(255, 255, 255, 0.08);
  --canvas-surface-active: rgba(255, 255, 255, 0.12);
  --canvas-border: rgba(255, 255, 255, 0.1);
  --canvas-border-strong: rgba(255, 255, 255, 0.15);
  --canvas-text: #f5f5f5;
  --canvas-text-soft: #e6e6e6;
  --canvas-text-muted: #a3a3a3;
  --canvas-brand: #f5f5f5;
  --canvas-brand-soft: rgba(255, 255, 255, 0.1);
  --canvas-accent: #f5f5f5;
  --canvas-accent-soft: rgba(255, 255, 255, 0.1);
  --canvas-success: #b8b8b8;
  --canvas-warning: #d4d4d4;
  --canvas-danger: #f27d7d;
  --canvas-radius-xs: 8px;
  --canvas-radius-sm: 12px;
  --canvas-radius: 16px;
  --canvas-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  --canvas-shadow-lg: 0 8px 10px -1px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  --canvas-focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.45);
  --canvas-motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --canvas-motion: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --canvas-scrollbar-track: rgba(255, 255, 255, 0.03);
  --canvas-scrollbar-thumb: rgba(255, 255, 255, 0.16);
  --canvas-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
  background-color: var(--canvas-bg);
  color: var(--canvas-text);
}

.canvas-page *::-webkit-scrollbar-track {
  background: var(--canvas-scrollbar-track);
}

.canvas-page *::-webkit-scrollbar-thumb {
  background: var(--canvas-scrollbar-thumb) padding-box;
}

.canvas-page *::-webkit-scrollbar-thumb:hover {
  background: var(--canvas-scrollbar-thumb-hover) padding-box;
}