/*
 * VidPost Design Tokens
 * Dark-first. Overrides Basecoat / shadcn-compatible CSS variables.
 * ------------------------------------------------------------------ */

:root,
.dark {
    /* --- Basecoat/shadcn theme variables (dark zinc) --- */
    --background: 0 0% 4%;
    /* zinc-950 #09090b */
    --foreground: 0 0% 98%;
    --card: 0 0% 7%;
    /* zinc-900 #18181b */
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 64%;
    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 63% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 0 0% 84%;
    --radius: 0.5rem;

    /* --- VidPost-specific tokens --- */
    --vp-token-color: 43 96% 50%;
    /* amber-400 — token/coin UI only */
    --vp-token-fg: 0 0% 9%;
    --vp-overlay-scrim-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 30%);
    --vp-overlay-scrim-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 40%);
    --vp-action-stack-right: 16px;
    --vp-safe-top: env(safe-area-inset-top, 0px);
    --vp-safe-bottom: env(safe-area-inset-bottom, 0px);
    --vp-safe-left: env(safe-area-inset-left, 0px);
    --vp-safe-right: env(safe-area-inset-right, 0px);
    --vp-bottom-nav-height: 56px;
    --vp-page-header-height: 56px;
    --vp-feed-max-width: 420px;
    /* desktop video column max */

    /* Animation easing */
    --vp-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);
    --vp-ease-spring: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Force dark on html — light mode not supported for video shell */
html {
    color-scheme: dark;
}