/* The panel on the palette's tokens (18 Oct 2026).
   palettes.css gives html[data-palette] the --ds-* tokens; here the panel's older variables are
   pointed at them, on <html> (where :root's derived variables resolve) and on <body> (where
   .dark-mode used to set its own values). Loaded after every other stylesheet. New CSS uses the
   --ds-* tokens directly. */

html[data-palette],
html[data-palette] body {
    /* the one accent: what used to be blue "primary" and orange "accent" */
    --primary-color: var(--ds-accent);
    --primary-color-rgb: var(--ds-accent-rgb);
    --primary-rgb: var(--ds-accent-rgb);
    --primary: var(--ds-accent);
    --primary-dark: var(--ds-accent-press);
    --primary-hover: var(--ds-accent-hover);
    --primary-color-dark: var(--ds-accent-press);
    --primary-light: var(--ds-accent-hover);
    --secondary-color: var(--ds-secondary);
    --secondary-color-rgb: var(--ds-secondary-rgb);
    --accent-color: var(--ds-accent);
    --accent-color-rgb: var(--ds-accent-rgb);
    --accent-contrast: var(--ds-accent-ink);
    --accent-active: var(--ds-accent);

    /* grounds */
    --bg-primary: var(--ds-bg);
    --bg-secondary: var(--ds-surface);
    --bg-tertiary: var(--ds-surface-2);
    --bg-elevated: var(--ds-surface);
    --card-background: var(--ds-surface);
    --card-bg: var(--ds-surface);
    --input-background: var(--ds-surface);

    /* text */
    --text-primary: var(--ds-ink);
    --text-secondary: var(--ds-ink-2);
    --text-muted: var(--ds-muted);
    --text-inverse: var(--ds-bg);

    /* lines */
    --border-light: var(--ds-line);
    --border-color: var(--ds-line);
    --border-medium: var(--ds-line-strong);
    --border-dark: var(--ds-line-strong);

    /* status */
    --success-color: var(--ds-ok);
    --warning-color: var(--ds-warn);
    --error-color: var(--ds-danger);
    --error: var(--ds-danger);
    --info-color: var(--ds-accent-text);
    --premium-success: var(--ds-ok);
    --premium-warning: var(--ds-warn);
    --premium-error: var(--ds-danger);

    /* depth */
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-md);
    --shadow-lg: var(--ds-shadow-lg);
    --shadow-xl: var(--ds-shadow-lg);
    --download-btn-bg: var(--ds-accent);
    --download-btn-color: var(--ds-accent-ink);
    --download-btn-hover-bg: var(--ds-accent-hover);
    --download-overlay-bg: var(--ds-overlay);

    /* the gradients become the accent and its second note — no stock purple/pink */
    --gradient-primary: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-secondary) 100%);
    --gradient-premium: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-accent-press) 100%);
    --gradient-accent: linear-gradient(135deg, var(--ds-secondary) 0%, var(--ds-accent) 100%);
    --gradient-success: linear-gradient(135deg, var(--ds-ok) 0%, var(--ds-ok) 100%);
    --gradient-dark: linear-gradient(135deg, var(--ds-surface-2) 0%, var(--ds-bg) 100%);
    --sharp-upscale-color: var(--ds-secondary);
    --sharp-upscale-hover: var(--ds-secondary);
    --soft-upscale-color: var(--ds-accent);
    --soft-upscale-hover: var(--ds-accent-hover);
    --model-sharp: var(--ds-secondary);
    --model-soft: var(--ds-accent);

    /* the layers' own inks (Creative, the brand page, the chat drawer), written as rgb triplets */
    --cs-ink: var(--ds-ink-rgb);
    --cs-primary-ink: var(--ds-ink-rgb);
    --cs-star: var(--ds-warn-rgb);
    --cs-danger-ink: var(--ds-danger);
    --cs-meta-alpha: 0.66;
    --cs-menu-shadow: var(--ds-shadow-md);
    --cs-modal-shadow: var(--ds-shadow-lg);
    --ubp-ink: var(--ds-ink-rgb);
    --uac-ink: var(--ds-ink-rgb);
    --uac-ground: rgba(var(--ds-surface-rgb), 0.98);
    --uac-pop-ground: rgba(var(--ds-surface-rgb), 0.99);
    --uac-shadow: var(--ds-shadow-lg);
    --uac-pop-shadow: var(--ds-shadow-md);

    /* shape: buttons 10px, chips round (the owner's choice, 18 Oct) */
    --radius-btn: 10px;
    --radius-chip: 999px;
}

/* text and icons over a picture or a video stay white in every palette */
html[data-palette] {
    --ds-on-media: #FFFFFF;
    --ds-on-media-rgb: 255, 255, 255;
    /* the dark glass of the badges and buttons that sit on a picture */
    --ds-media-glass-rgb: 14, 16, 18;
}

html[data-palette] body {
    background-color: var(--ds-bg);
    color: var(--ds-ink);
}

html[data-palette] ::selection {
    background: rgba(var(--ds-accent-rgb), 0.32);
}