/* ==========================================================================
   Design tokens and shared controls. Loaded by the login pages (site.css)
   and by the admin panel (admin.css). Components never use a raw colour —
   only the semantic tokens defined here.
   ========================================================================== */

@font-face {
    font-family: Vazirmatn;
    src: url("fonts/Vazirmatn-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root, :root[data-theme="light"] {
    color-scheme: light;

    /* shape */
    --radius: .5rem;          /* buttons, fields, nav items */
    --radius-card: 1rem;      /* cards, dialogs, panels */
    --radius-box: .75rem;     /* icon boxes, nested tiles */
    --control-height: 2.5rem;
    --control-height-sm: 2.25rem;

    /* surfaces */
    --background: oklch(94.81% .0093 286.22);
    --foreground: oklch(24.97% .0382 248.18);
    --surface: oklch(100% 0 0);
    --surface-secondary: oklch(96.74% .0013 286.38);
    --surface-tertiary: oklch(94.81% .0093 286.22);
    --overlay: oklch(100% 0 0);
    --muted: oklch(51.73% 0 0);
    --default: oklch(95.5% .0045 271.37);
    --default-foreground: var(--foreground);

    /* action + brand */
    --accent: oklch(57.41% .2328 264.97);
    --accent-foreground: oklch(100% 0 0);
    --brand: oklch(42.3% .2047 266.48);
    --brand-foreground: oklch(100% 0 0);
    --brand-text: var(--brand);
    --brand-soft: color-mix(in oklab, var(--brand) 10%, transparent);

    /* status */
    --success: oklch(73.29% .1935 150.81);
    --success-foreground: oklch(21.03% .0059 285.89);
    --warning: oklch(78.19% .1585 72.33);
    --warning-foreground: oklch(21.03% .0059 285.89);
    --danger: oklch(55% .21 27);
    --danger-foreground: oklch(100% 0 0);

    /* lines, fields, elevation */
    --border: oklch(91.97% .004 286.32);
    --separator: oklch(94.5% .0041 271.37);
    --field-background: oklch(100% 0 0);
    --field-foreground: var(--foreground);
    --field-placeholder: var(--muted);
    --field-border: var(--border);
    --overlay-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%), 0 14px 28px 0 rgb(0 0 0 / 8%);
    --backdrop: oklch(24.97% .0382 248.18 / 45%);
    --focus: var(--accent);
    --soft-mix: 15%;
    --soft-foreground-mix: 70%;

    font: 1rem/1.6 Vazirmatn, Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --background: oklch(19.5% .025 250);
        --foreground: oklch(95% .005 286);
        --surface: oklch(24.97% .0382 248.18);
        --surface-secondary: oklch(28% .03 250);
        --surface-tertiary: oklch(31% .03 250);
        --overlay: oklch(27% .036 248);
        --muted: oklch(72% .015 286);
        --default: oklch(31% .03 250);

        --accent: oklch(65% .2 264.97);
        --brand: oklch(52% .19 266.48);
        --brand-text: oklch(80% .1 266.48);
        --brand-soft: color-mix(in oklab, var(--brand) 28%, transparent);

        --warning: oklch(82.03% .1388 76.34);
        --danger: oklch(63% .2 29.23);

        --border: oklch(100% 0 0 / 12%);
        --separator: oklch(100% 0 0 / 8%);
        --field-background: oklch(21.5% .03 250);
        --backdrop: oklch(10% .02 250 / 65%);
        --soft-mix: 12%;
        --soft-foreground-mix: 80%;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --background: oklch(19.5% .025 250);
    --foreground: oklch(95% .005 286);
    --surface: oklch(24.97% .0382 248.18);
    --surface-secondary: oklch(28% .03 250);
    --surface-tertiary: oklch(31% .03 250);
    --overlay: oklch(27% .036 248);
    --muted: oklch(72% .015 286);
    --default: oklch(31% .03 250);

    --accent: oklch(65% .2 264.97);
    --brand: oklch(52% .19 266.48);
    --brand-text: oklch(80% .1 266.48);
    --brand-soft: color-mix(in oklab, var(--brand) 28%, transparent);

    --warning: oklch(82.03% .1388 76.34);
    --danger: oklch(63% .2 29.23);

    --border: oklch(100% 0 0 / 12%);
    --separator: oklch(100% 0 0 / 8%);
    --field-background: oklch(21.5% .03 250);
    --backdrop: oklch(10% .02 250 / 65%);
    --soft-mix: 12%;
    --soft-foreground-mix: 80%;
}

/* Derived tints and hovers — never hand-picked, always mixed from the base. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
    --accent-soft: color-mix(in oklab, var(--accent) var(--soft-mix), transparent);
    --accent-soft-foreground: color-mix(in oklab, var(--accent) var(--soft-foreground-mix), var(--foreground));
    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground));

    --success-soft: color-mix(in oklab, var(--success) var(--soft-mix), transparent);
    --success-soft-foreground: color-mix(in oklab, var(--success) var(--soft-foreground-mix), var(--foreground));

    --warning-soft: color-mix(in oklab, var(--warning) var(--soft-mix), transparent);
    --warning-soft-foreground: color-mix(in oklab, var(--warning) var(--soft-foreground-mix), var(--foreground));

    --danger-soft: color-mix(in oklab, var(--danger) var(--soft-mix), transparent);
    --danger-soft-foreground: color-mix(in oklab, var(--danger) var(--soft-foreground-mix), var(--foreground));

    --default-soft: color-mix(in oklab, var(--muted) var(--soft-mix), transparent);
    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground));
    --danger-soft-hover: color-mix(in oklab, var(--danger) 22%, transparent);

    --field-hover: color-mix(in oklab, var(--field-background) 90%, var(--field-foreground));
    --field-border-hover: color-mix(in oklab, var(--field-border) 88%, var(--field-foreground));
    --field-border-focus: color-mix(in oklab, var(--field-border) 74%, var(--field-foreground));
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-size: .875rem;
    font-feature-settings: "ss01";   /* Vazirmatn: Persian digits and letter alternates */
}

/* Vazirmatn's ss01 renders Latin digits as Persian ones, which is right for
   Persian prose and wrong for identifiers — so LTR islands opt out (§7.4). */
[dir="ltr"], .chip-mono, code, kbd { font-feature-settings: normal; }

/* Timers, counters and table figures must not jitter as digits change. */
.num { font-variant-numeric: tabular-nums; }

/* Kept in the accessibility tree, out of the layout. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

a { color: var(--accent); text-decoration: none; transition: color .1s ease-out; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 9999px; background: var(--border); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Focus and disabled — non-negotiable, the panel is operated by keyboard.
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--focus);
}

:disabled, [disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Fields (§9.5) — label, control, then error *or* description, never both.
   -------------------------------------------------------------------------- */

input, select, textarea {
    height: var(--control-height);
    padding: 0 .75rem;
    font: inherit;
    font-size: 1rem;               /* 16px on phones stops iOS zoom-on-focus */
    color: var(--field-foreground);
    background: var(--field-background);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    transition: background-color .1s ease-out, border-color .1s ease-out, box-shadow .1s ease-out;
}

textarea { height: auto; padding: .5rem .75rem; min-height: 5rem; }

input:hover, select:hover, textarea:hover {
    background: var(--field-hover);
    border-color: var(--field-border-hover);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--focus);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    outline: 1px solid var(--danger);
    outline-offset: -1px;
}

input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 2px var(--danger);
}

input::placeholder, textarea::placeholder { color: var(--field-placeholder); }

/* A checkbox is not a field: it keeps its native box. */
input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    background: none;
    accent-color: var(--accent);
}

.field-error { color: var(--danger); font-size: .75rem; }
.field-desc { color: var(--muted); font-size: .75rem; }

@media (min-width: 40rem) {
    input, select, textarea { font-size: .875rem; }
}

@media (min-width: 48rem) {
    :root { --control-height: 2.25rem; --control-height-sm: 2rem; }
}

/* --------------------------------------------------------------------------
   Buttons (§9.1) — at most one primary per area.
   -------------------------------------------------------------------------- */

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: var(--control-height);
    padding: 0 1rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-foreground);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .1s ease-out, color .1s ease-out, transform .25s ease-out;
}

button:hover, .button:hover { background: var(--accent-hover); text-decoration: none; }
button:active:not(:disabled), .button:active { transform: scale(.97); }
button:disabled, .button[aria-disabled="true"] { pointer-events: none; }

button.secondary, .button.secondary {
    color: var(--accent-soft-foreground);
    background: var(--default);
}
button.secondary:hover, .button.secondary:hover { background: var(--default-hover); }

button.tertiary, .button.tertiary {
    color: var(--default-foreground);
    background: var(--default);
}
button.tertiary:hover, .button.tertiary:hover { background: var(--default-hover); }

button.ghost, .button.ghost {
    color: var(--default-foreground);
    background: transparent;
}
button.ghost:hover, .button.ghost:hover { background: var(--default); }

button.danger, .button.danger {
    color: var(--danger-foreground);
    background: var(--danger);
}
button.danger:hover, .button.danger:hover {
    background: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground));
}

button.danger-soft, .button.danger-soft {
    color: var(--danger-soft-foreground);
    background: var(--danger-soft);
}
button.danger-soft:hover, .button.danger-soft:hover { background: var(--danger-soft-hover); }

button.small, .button.small { height: var(--control-height-sm); padding: 0 .75rem; font-size: .8125rem; }
button.icon, .button.icon { width: var(--control-height); padding: 0; }
button.icon.small, .button.icon.small { width: var(--control-height-sm); }

button svg, .button svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Chips and status pills (§9.10) — soft variant only, icon + label together.
   -------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--default-soft);
    color: var(--muted);
}

.chip svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.chip-accent { background: var(--accent-soft); color: var(--accent-soft-foreground); }
.chip-brand { background: var(--brand-soft); color: var(--brand-text); }
.chip-success { background: var(--success-soft); color: var(--success-soft-foreground); }
.chip-warning { background: var(--warning-soft); color: var(--warning-soft-foreground); }
.chip-danger { background: var(--danger-soft); color: var(--danger-soft-foreground); }
.chip-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   Alerts (§9.9) — indicator icon, title, description, optional action.
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    line-height: 1.6;
    background: var(--danger-soft);
    color: var(--danger-soft-foreground);
}

.alert svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .125rem; }
.alert-warning { background: var(--warning-soft); color: var(--warning-soft-foreground); }
.alert-success { background: var(--success-soft); color: var(--success-soft-foreground); }
.alert-accent { background: var(--accent-soft); color: var(--accent-soft-foreground); }
.alert-body { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Icon box (§9.3) — a soft-tinted square holding one icon.
   -------------------------------------------------------------------------- */

.icon-box {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-box);
    background: var(--brand-soft);
    color: var(--brand-text);
}

.icon-box svg { width: 1.125rem; height: 1.125rem; }
.icon-box-accent { background: var(--accent-soft); color: var(--accent-soft-foreground); }
.icon-box-success { background: var(--success-soft); color: var(--success-soft-foreground); }
.icon-box-warning { background: var(--warning-soft); color: var(--warning-soft-foreground); }
.icon-box-danger { background: var(--danger-soft); color: var(--danger-soft-foreground); }
.icon-box-default { background: var(--default-soft); color: var(--muted); }

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--brand-text);
    font-size: 1rem;
    font-weight: 700;
}

.mark { width: 2.25rem; height: 2.25rem; object-fit: contain; border-radius: var(--radius-box); }