/*
 * Copyright (C) 2026-Present ComiCine
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * Section 7 additional terms apply when the work is used under GNU AGPL v3.
 * See ADDITIONAL_TERMS.txt.
 */

/*
   ComiCine site-wide color and interface tokens (single source of truth).
   base.html includes this file; the standalone gate, redirect, and preview pages share its palette.
   Component styles should use these semantic variables instead of duplicating color values.
   */
:root {
    color-scheme: dark;

    /* Primary text hierarchy. */
    --text-primary: #e2e2e3;
    --text-secondary: #b7b7bb;
    --text-muted: #a1a1aa;
    --text-subtle: #787880;
    --text-disabled: #65656b;
    --text-inverse: #ffffff;
    --text-rgb: 226, 226, 227;

    /* Surfaces, borders, and brand. */
    --bg: #1b1b1f;
    --browser-theme-color: #1e1e1e;
    --text: var(--text-primary);
    --line: #2e2e32;
    --panel-bg: #202127;
    --highlight-surface: #2a2a2f;
    --highlight: var(--highlight-surface);
    --hover-highlight: #ffffff;
    --hover-highlight-soft: rgba(255, 255, 255, 0.12);
    --hover-highlight-border: rgba(255, 255, 255, 0.68);
    --hover-highlight-overlay: rgba(255, 255, 255, 0.14);
    --footer-border: var(--line);
    --accent: #05A5A6;
    --accent-soft: rgba(5, 165, 166, 0.12);
    --accent-glow: rgba(5, 165, 166, 0.2);
    --focus-ring: var(--accent);

    /* Status colors. */
    --danger: #f43f5e;
    --danger-strong: #ff4757;
    --danger-soft: rgba(255, 71, 87, 0.12);
    --danger-button: #f43f5e;
    --error-soft: rgba(185, 28, 28, 0.12);
    --error-border: rgba(185, 28, 28, 0.4);
    --success: #4ade80;
    --success-soft: rgba(34, 197, 94, 0.13);
    --info: #60a5fa;
    --info-soft: rgba(59, 130, 246, 0.13);
    --warning: #fbbf24;
    --warning-soft: rgba(245, 158, 11, 0.13);
    --purple: #c084fc;
    --purple-soft: rgba(168, 85, 247, 0.16);
    --status-down: #dc2626;
    --status-pending: #d97706;

    /* Translucent overlays and shadows. */
    --overlay-medium: rgba(0, 0, 0, 0.48);
    --overlay-strong: rgba(0, 0, 0, 0.6);
    --image-caption-scrim: rgba(0, 0, 0, 0.55);
    --shine-subtle: rgba(255, 255, 255, 0.08);
    --text-ghost: rgba(var(--text-rgb), 0.2);
    --border-ghost: rgba(var(--text-rgb), 0.05);
    --scroll-thumb: rgba(var(--text-rgb), 0.1);
    --spinner-track: rgba(var(--text-rgb), 0.15);
    --row-border-ghost: rgba(var(--text-rgb), 0.04);
    --shadow-soft: rgba(0, 0, 0, 0.15);
    --shadow-card: rgba(0, 0, 0, 0.22);
    --shadow-panel: rgba(0, 0, 0, 0.35);
    --visitor-panel-rgb: 27, 29, 33;
    --auth-card-bg: #202127;

    /* Gate page background and footer text. */
    --auth-bg-start: #17181c;
    --auth-bg-end: #101114;
    --footer-label: #E7EBCE;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    /* Shared corner radii. */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Letter-spacing scale: 0.65 for full-width CJK text and 0.3 for half-width English. */
    --ls-scale: 0.65;

    /* Theme switch slider. */
    --switch-icon: #dfdfd6;
    --switch-shadow: 0 1px 3px var(--shadow-panel);
}

html[lang^="en"] { --ls-scale: 0.3; }

.light-mode {
    color-scheme: light;

    /* Primary text hierarchy. */
    --text-primary: #1f2328;
    --text-secondary: #45474c;
    --text-muted: #6b7280;
    --text-subtle: #858b94;
    --text-disabled: #9ca3af;
    --text-inverse: #ffffff;
    --text-rgb: 31, 35, 40;

    /* Surfaces, borders, and brand. */
    --bg: #ffffff;
    --browser-theme-color: #ffffff;
    --line: #e2e2e3;
    --panel-bg: #f6f6f7;
    --highlight-surface: #f2f2f3;
    --accent: #05A5A6;
    --accent-soft: rgba(5, 165, 166, 0.12);
    --accent-glow: rgba(5, 165, 166, 0.2);
    --focus-ring: var(--accent);
    --footer-border: var(--line);

    /* Translucent overlays and shadows. */
    --visitor-panel-rgb: 240, 240, 240;
    --auth-card-bg: #ffffff;
    --auth-bg-start: #f3f4f6;
    --auth-bg-end: #e5e7eb;
    --footer-label: #9ca3af;
    --switch-icon: #67676c;
    --switch-shadow: 0 1px 2px var(--shadow-soft);
}