/*
 * REVA brand + semantic tokens.
 * Brand: #02497b · #0568a8 · #013a63
 */
:root,
[data-theme="light"] {
  --color-primary: #02497b;
  --color-on-primary: #ffffff;
  --color-secondary: #0568a8;
  --color-accent: #0d9488;
  --color-background: #f8fafc;
  --color-foreground: #0f172a;
  --color-card: #ffffff;
  --color-muted: #f1f5f9;
  --color-muted-foreground: #64748b;
  --color-border: #e2e8f0;
  --color-destructive: #dc2626;
  --color-ring: #0568a8;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 20px 40px -12px rgb(2 73 123 / 0.18);

  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;

  --presenter-bar: 2.75rem;
  --presenter-hud: 2.75rem;
  --deck-stack-gap: 0.65rem;
  --stage-pad: clamp(0.85rem, 2.2vmin, 1.5rem);
  --stage-available-h: calc(
    100dvh - var(--presenter-bar) - 2 * var(--stage-pad) - var(--presenter-hud) - var(--deck-stack-gap)
  );

  --cursor-default: url("/cursors/default.svg") 12 12, default;
  --cursor-pointer: url("/cursors/pointer.svg") 12 12, pointer;

  --motion-hover: 0.28s cubic-bezier(0.34, 1.35, 0.64, 1);
  --motion-press: 0.12s ease-out;
  --hover-lift-y: -2px;
  --hover-scale: 1.08;
  /* inset inside frame clip so scale(1.08) does not shave left/right edges */
  --hover-gutter: clamp(0.5rem, 1.8cqmin, 0.85rem);

  --brand-gradient: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-primary) 4%, var(--color-background)) 0%,
    var(--color-background) 55%,
    color-mix(in srgb, var(--color-secondary) 5%, var(--color-background)) 100%
  );
}

[data-theme="dark"] {
  --color-primary: #5eb3f6;
  --color-on-primary: #0b1220;
  --color-secondary: #3d8fd4;
  --color-accent: #2dd4bf;
  --color-background: #0b1220;
  --color-foreground: #f1f5f9;
  --color-card: #111c2e;
  --color-muted: #162033;
  --color-muted-foreground: #94a3b8;
  --color-border: #1e2d42;
  --color-destructive: #f87171;
  --color-ring: #5eb3f6;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.55);

  --brand-gradient: linear-gradient(165deg, #0f1a2e 0%, #0b1220 50%, #111c2e 100%);

  --stage-available-h: calc(100dvh - var(--presenter-bar) - 2 * var(--stage-pad) - var(--presenter-hud) - var(--deck-stack-gap));
}