/* ==========================================================================
   VICH brand layer for Mock-Up Machine (shared by landing, studio, admin)
   Dark (default): true black #000 (OLED pixels off), white type and buttons.
   Light: white page, black type and buttons.
   Signal cyan #23D5D5 is only a spark: focus, progress, live dot, selection
   and desktop hover, and never on white (in light mode the spark is black).
   Mode = device setting unless the visitor picks one (html[data-theme]).
   ========================================================================== */
:root {
    color-scheme: dark;
    --v-bg: #000000;
    --v-raised: #121212;
    --v-raised-2: #1C1C1C;
    --v-line: #262626;
    --v-line-strong: #3A3A3A;
    --v-text: #FFFFFF;
    --v-text-soft: #C8C8C8;
    --v-muted: #9A9A9A;
    --v-muted-2: #6B6B6B;
    --v-accent: #FFFFFF;
    --v-on-accent: #000000;
    --v-signal: #23D5D5;
    --v-hover: #23D5D5;
    --v-hover-fill: #23D5D5;
    --v-on-hover-fill: #000000;
    --v-selection-bg: #23D5D5;
    --v-selection-text: #000000;
    --v-danger: #FF5C5C;
    --v-warn: #FFB020;
    --v-overlay: rgba(0, 0, 0, 0.82);
    --v-nav: rgba(0, 0, 0, 0.82);
    --v-particle: #FFFFFF;
    --v-particle-dot: 0.26;
    --v-particle-line: 0.09;
    --v-radius: 2px;
    --v-font-sans: 'Archivo', 'IBM Plex Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
    --v-font-mono: 'JetBrains Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --v-bg: #FFFFFF; --v-raised: #F2F2F2; --v-raised-2: #E8E8E8;
        --v-line: #E0E0E0; --v-line-strong: #C8C8C8;
        --v-text: #000000; --v-text-soft: #2B2B2B; --v-muted: #5C5C5C; --v-muted-2: #8A8A8A;
        --v-accent: #000000; --v-on-accent: #FFFFFF;
        --v-signal: #000000; --v-hover: #000000; --v-hover-fill: #2B2B2B; --v-on-hover-fill: #FFFFFF;
        --v-selection-bg: #000000; --v-selection-text: #FFFFFF;
        --v-danger: #C62828; --v-warn: #8A5A00;
        --v-overlay: rgba(255, 255, 255, 0.86); --v-nav: rgba(255, 255, 255, 0.86);
        --v-particle: #000000; --v-particle-dot: 0.2; --v-particle-line: 0.07;
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --v-bg: #FFFFFF; --v-raised: #F2F2F2; --v-raised-2: #E8E8E8;
    --v-line: #E0E0E0; --v-line-strong: #C8C8C8;
    --v-text: #000000; --v-text-soft: #2B2B2B; --v-muted: #5C5C5C; --v-muted-2: #8A8A8A;
    --v-accent: #000000; --v-on-accent: #FFFFFF;
    --v-signal: #000000; --v-hover: #000000; --v-hover-fill: #2B2B2B; --v-on-hover-fill: #FFFFFF;
    --v-selection-bg: #000000; --v-selection-text: #FFFFFF;
    --v-danger: #C62828; --v-warn: #8A5A00;
    --v-overlay: rgba(255, 255, 255, 0.86); --v-nav: rgba(255, 255, 255, 0.86);
    --v-particle: #000000; --v-particle-dot: 0.2; --v-particle-line: 0.07;
}

::selection { background: var(--v-selection-bg); color: var(--v-selection-text); }
::-moz-selection { background: var(--v-selection-bg); color: var(--v-selection-text); }

/* Brand marks: inline SVG, colour follows the text */
.vich-logo, .vich-mark { display: block; height: auto; color: var(--v-text); }

/* One-line footer: MM.VICH.SI */
.vich-footer-line {
    font-family: var(--v-font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--v-muted); text-decoration: none;
}

/* Appearance switch (System / Light / Dark) */
.theme-toggle { position: relative; display: inline-flex; }
.theme-toggle-btn {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    background: transparent; color: var(--v-text); border: 1px solid var(--v-line-strong); border-radius: var(--v-radius);
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle-btn svg, .theme-option svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 2000; min-width: 168px;
    background: var(--v-bg); border: 1px solid var(--v-line-strong); border-radius: var(--v-radius);
    padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.theme-menu[hidden] { display: none !important; }
.theme-option {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
    background: transparent; color: var(--v-muted); border: 0; border-radius: var(--v-radius);
    font: 400 14px var(--v-font-sans); text-align: left; cursor: pointer;
}
.theme-option[aria-checked="true"] { color: var(--v-text); background: var(--v-raised); font-weight: 600; }
.theme-option .check { margin-left: auto; opacity: 0; }
.theme-option[aria-checked="true"] .check { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
    .theme-toggle-btn:hover { color: var(--v-hover); border-color: var(--v-hover); }
    .theme-option:hover { color: var(--v-hover); }
}