/* ============ Theme tokens ============
   Variable names follow the Clawpilot theme contract (--cp-*); values are Apple's system palette
   (HIG colour specs, June 2025 update) as requested for this mockup. --ap-* adds Apple system colours. */
:root {
  color-scheme: light;
  --cp-bg: #f2f2f7;
  --cp-bg-elevated: #ffffff;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f2f2f7;
  --cp-border: rgba(60, 60, 67, 0.16);
  --cp-border-strong: rgba(60, 60, 67, 0.36);
  --cp-text: #1d1d1f;
  --cp-text-muted: rgba(60, 60, 67, 0.62);
  --cp-text-soft: rgba(60, 60, 67, 0.82);
  --cp-accent: #0088ff;
  --cp-accent-hover: #0077e6;
  --cp-accent-soft: rgba(0, 136, 255, 0.12);
  --cp-accent-fg: #ffffff;
  --cp-success: #34c759;
  --cp-danger: #ff383c;
  --cp-warning: #ff8d28;
  --cp-link: #1e6ef4;
  --cp-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  --cp-overlay: rgba(255, 255, 255, 0.78);
  --cp-panel: rgba(255, 255, 255, 0.72);
  --cp-panel-strong: rgba(255, 255, 255, 0.94);
  --cp-sheen: rgba(255, 255, 255, 0.6);
  --cp-highlight: rgba(0, 136, 255, 0.12);

  --ap-red: #ff383c; --ap-orange: #ff8d28; --ap-yellow: #ffcc00; --ap-green: #34c759; --ap-mint: #00c8b3;
  --ap-teal: #00c3d0; --ap-cyan: #00c0e8; --ap-blue: #0088ff; --ap-indigo: #6155f5; --ap-purple: #cb30e0;
  --ap-pink: #ff2d55; --ap-brown: #ac7f5e;
  --ap-gray: #8e8e93; --ap-gray2: #aeaeb2; --ap-gray3: #c7c7cc; --ap-gray4: #d1d1d6; --ap-gray5: #e5e5ea; --ap-gray6: #f2f2f7;
  --ap-fill: rgba(120, 120, 128, 0.20); --ap-fill-2: rgba(120, 120, 128, 0.16); --ap-fill-3: rgba(118, 118, 128, 0.12);
  --ap-sep: rgba(60, 60, 67, 0.29);
  --ap-white: #ffffff; --ap-black: #000000; --ap-ink: #1d1d1f;
  --ap-glass: rgba(255, 255, 255, 0.62);
  --ap-glass-stroke: rgba(255, 255, 255, 0.75);
  --ap-glass-edge: rgba(0, 0, 0, 0.08);
  --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --ap-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ap-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.18);
  --ap-scrim: rgba(0, 0, 0, 0.45);
  --ap-focus: rgba(0, 136, 255, 0.45);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "InterV", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "InterV", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-rounded: "SF Pro Rounded", ui-rounded, "InterV", "Segoe UI Variable Display", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #000000;
  --cp-bg-elevated: #1c1c1e;
  --cp-surface: #1c1c1e;
  --cp-surface-soft: #2c2c2e;
  --cp-border: rgba(84, 84, 88, 0.55);
  --cp-border-strong: rgba(120, 120, 128, 0.7);
  --cp-text: #f5f5f7;
  --cp-text-muted: rgba(235, 235, 245, 0.6);
  --cp-text-soft: rgba(235, 235, 245, 0.82);
  --cp-accent: #0091ff;
  --cp-accent-hover: #2ea1ff;
  --cp-accent-soft: rgba(0, 145, 255, 0.2);
  --cp-accent-fg: #ffffff;
  --cp-success: #30d158;
  --cp-danger: #ff4245;
  --cp-warning: #ff9230;
  --cp-link: #5cb8ff;
  --cp-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --cp-overlay: rgba(28, 28, 30, 0.82);
  --cp-panel: rgba(28, 28, 30, 0.7);
  --cp-panel-strong: rgba(28, 28, 30, 0.95);
  --cp-sheen: rgba(255, 255, 255, 0.06);
  --cp-highlight: rgba(0, 145, 255, 0.18);

  --ap-red: #ff4245; --ap-orange: #ff9230; --ap-yellow: #ffd600; --ap-green: #30d158; --ap-mint: #00dac3;
  --ap-teal: #00d2e0; --ap-cyan: #3cd3fe; --ap-blue: #0091ff; --ap-indigo: #6d7cff; --ap-purple: #db34f2;
  --ap-pink: #ff375f; --ap-brown: #b78a66;
  --ap-gray: #8e8e93; --ap-gray2: #636366; --ap-gray3: #48484a; --ap-gray4: #3a3a3c; --ap-gray5: #2c2c2e; --ap-gray6: #1c1c1e;
  --ap-fill: rgba(120, 120, 128, 0.36); --ap-fill-2: rgba(120, 120, 128, 0.32); --ap-fill-3: rgba(118, 118, 128, 0.24);
  --ap-sep: rgba(84, 84, 88, 0.65);
  --ap-ink: #f5f5f7;
  --ap-glass: rgba(44, 44, 46, 0.55);
  --ap-glass-stroke: rgba(255, 255, 255, 0.16);
  --ap-glass-edge: rgba(255, 255, 255, 0.06);
  --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ap-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ap-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);
  --ap-scrim: rgba(0, 0, 0, 0.6);
  --ap-focus: rgba(0, 145, 255, 0.55);
}
/* Venue screens (big screen + phones) always use the dark keynote palette. */
.venue {
  color-scheme: dark;
  --cp-bg: #000000; --cp-bg-elevated: #1c1c1e; --cp-surface: #1c1c1e; --cp-surface-soft: #2c2c2e;
  --cp-border: rgba(84, 84, 88, 0.55); --cp-border-strong: rgba(120, 120, 128, 0.7);
  --cp-text: #f5f5f7; --cp-text-muted: rgba(235, 235, 245, 0.6); --cp-text-soft: rgba(235, 235, 245, 0.82);
  --cp-accent: #0091ff; --cp-accent-hover: #2ea1ff; --cp-accent-soft: rgba(0, 145, 255, 0.2); --cp-accent-fg: #ffffff;
  --cp-success: #30d158; --cp-danger: #ff4245; --cp-warning: #ff9230; --cp-link: #5cb8ff;
  --cp-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); --cp-overlay: rgba(28, 28, 30, 0.82);
  --ap-red: #ff4245; --ap-orange: #ff9230; --ap-yellow: #ffd600; --ap-green: #30d158; --ap-mint: #00dac3;
  --ap-teal: #00d2e0; --ap-cyan: #3cd3fe; --ap-blue: #0091ff; --ap-indigo: #6d7cff; --ap-purple: #db34f2;
  --ap-pink: #ff375f; --ap-brown: #b78a66;
  --ap-gray: #8e8e93; --ap-gray2: #636366; --ap-gray3: #48484a; --ap-gray4: #3a3a3c; --ap-gray5: #2c2c2e; --ap-gray6: #1c1c1e;
  --ap-fill: rgba(120, 120, 128, 0.36); --ap-fill-2: rgba(120, 120, 128, 0.32); --ap-fill-3: rgba(118, 118, 128, 0.24);
  --ap-sep: rgba(84, 84, 88, 0.65); --ap-ink: #f5f5f7;
  --ap-glass: rgba(58, 58, 60, 0.42); --ap-glass-stroke: rgba(255, 255, 255, 0.18); --ap-glass-edge: rgba(255, 255, 255, 0.07);
  --ap-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45); --ap-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.7);
  --ap-scrim: rgba(0, 0, 0, 0.62);
  --v-card: rgba(28, 28, 30, 0.86);
  --v-card-solid: #1c1c1e;
  --v-card-2: #2c2c2e;
  --v-card-3: #3a3a3c;
  --v-hairline: rgba(255, 255, 255, 0.08);
  --v-hairline-2: rgba(255, 255, 255, 0.14);
  --v-ink-dim: rgba(235, 235, 245, 0.32);
  --v-glow: rgba(0, 145, 255, 0.35);
  --v-titanium-1: #5b5b60; --v-titanium-2: #2a2a2d; --v-titanium-3: #9a9aa0;
  --v-screen: #000000;
  --v-white-10: rgba(255, 255, 255, 0.10);
  --v-ink: #1d1d1f;
  --v-paper: #ffffff;
  --v-paper-2: #f2f2f7;
  --v-ink-2: rgba(60, 60, 67, 0.62);
  --v-white-20: rgba(255, 255, 255, 0.20);
  --v-white-35: rgba(255, 255, 255, 0.35);
  --v-white-60: rgba(255, 255, 255, 0.60);
  --v-black-40: rgba(0, 0, 0, 0.40);
  --v-black-70: rgba(0, 0, 0, 0.70);
  color: var(--cp-text);
}