/* B14.6 — Platform visual system: the ONE canonical token source.
 *
 * Every page (student, staff/center, admin, guardian, auth, media shells) loads this file first.
 * Domain stylesheets (student-ui.css, courses.css, staff-ui.css, center-theme.css, guardian-*.css)
 * reference these tokens; they never define their own brand colors, radius or motion values.
 * Rules and usage: docs/PLATFORM_VISUAL_SYSTEM.md.
 *
 * Identity: white / near-white canvas, deep navy, crimson red, restrained slate neutrals.
 * Light is the default. Dark mode (html.dark) only swaps the semantic values.
 */
:root {
    /* ---- color: brand ---- */
    --pv-navy: #0b1229;
    --pv-navy-2: #111c3d;          /* raised navy surface (cover, hover on navy) */
    --pv-navy-hover: #1a2750;
    --pv-navy-soft: #eef1f8;       /* selected / tinted neutral-brand background */
    --pv-navy-line: rgba(255, 255, 255, .09);
    --pv-on-navy: #ffffff;
    --pv-on-navy-muted: #b9c1d6;
    --pv-red: #e5252a;             /* primary action, active accent */
    --pv-red-hover: #c81e23;
    --pv-red-soft: #fdecec;
    --pv-red-ink: #b3161b;         /* red text on light surfaces (AA) */

    /* ---- color: surfaces & text ---- */
    --pv-canvas: #f8fafc;
    --pv-surface: #ffffff;
    --pv-surface-muted: #f3f5f9;
    --pv-surface-sunken: #eceff5;
    --pv-text: #0b1229;
    --pv-text-2: #334155;
    --pv-muted: #56607a;
    --pv-subtle: #6b7489;          /* lowest-emphasis text still >= 4.5:1 on white */
    --pv-border: #e3e7ef;
    --pv-border-strong: #cbd2de;
    --pv-disabled: #9aa3b5;
    --pv-overlay: rgba(11, 18, 41, .55);

    /* ---- color: semantic (text / soft background / border) ---- */
    --pv-success: #0f7a3a;  --pv-success-soft: #e8f7ee;  --pv-success-line: #bfe6cd;
    --pv-warning: #9a5b00;  --pv-warning-soft: #fff4e0;  --pv-warning-line: #f5d9a3;
    --pv-danger: #b3161b;   --pv-danger-soft: #fdecec;   --pv-danger-line: #f3c4c5;
    --pv-info: #1d4ed8;     --pv-info-soft: #eaf1fe;     --pv-info-line: #c4d6fb;
    --pv-teal: #0f766e;     --pv-teal-soft: #e6f6f4;
    --pv-danger-solid: #9f1217;    /* destructive filled button: darker than the primary red */

    /* ---- typography ---- */
    --pv-font: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --pv-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --pv-fs-caption: 12px;
    --pv-fs-helper: 13px;
    --pv-fs-body: 15px;
    --pv-fs-body-compact: 14px;    /* staff data-dense screens */
    --pv-fs-card-title: 16px;
    --pv-fs-section: 18px;
    --pv-fs-stat: 22px;
    --pv-fs-page: clamp(20px, 1.9vw, 26px);
    --pv-fw-regular: 400;
    --pv-fw-medium: 600;
    --pv-fw-bold: 700;
    --pv-fw-heavy: 800;
    --pv-lh: 1.6;
    --pv-lh-tight: 1.3;

    /* ---- spacing (4px scale) ---- */
    --pv-sp-1: 4px; --pv-sp-2: 8px; --pv-sp-3: 12px; --pv-sp-4: 16px;
    --pv-sp-5: 20px; --pv-sp-6: 24px; --pv-sp-8: 32px; --pv-sp-10: 40px;
    --pv-page-pad: clamp(16px, 2.5vw, 40px);

    /* ---- radius ---- */
    --pv-radius-sm: 8px;
    --pv-radius-md: 12px;
    --pv-radius-lg: 16px;
    --pv-radius-pill: 999px;

    /* ---- elevation ---- */
    --pv-shadow-card: 0 1px 2px rgba(11, 18, 41, .05), 0 4px 14px rgba(11, 18, 41, .05);
    --pv-shadow-hover: 0 2px 4px rgba(11, 18, 41, .08), 0 10px 26px rgba(11, 18, 41, .10);
    --pv-shadow-elevated: 0 18px 48px rgba(11, 18, 41, .20);
    --pv-focus-ring: 0 0 0 3px rgba(229, 37, 42, .35);

    /* ---- control heights ---- */
    --pv-control-h: 40px;
    --pv-control-h-compact: 34px;
    --pv-touch: 44px;

    /* ---- motion ---- */
    --pv-dur-micro: 140ms;
    --pv-dur-base: 190ms;
    --pv-dur-modal: 220ms;
    --pv-ease-out: cubic-bezier(.2, .8, .2, 1);
    --pv-ease-in: cubic-bezier(.4, 0, 1, 1);
    --pv-enter-shift: 6px;
}

html.dark {
    --pv-navy-soft: #1a2442;
    --pv-red-soft: rgba(229, 37, 42, .16);
    --pv-red-ink: #ff8a8e;
    --pv-canvas: #0a0f1f;
    --pv-surface: #111a30;
    --pv-surface-muted: #16203a;
    --pv-surface-sunken: #1b2644;
    --pv-text: #eef1f8;
    --pv-text-2: #d3d9e7;
    --pv-muted: #a3acc4;
    --pv-subtle: #8f99b3;
    --pv-border: #26314f;
    --pv-border-strong: #34406a;
    --pv-disabled: #5d6886;
    --pv-overlay: rgba(2, 6, 18, .7);
    --pv-success: #5fd68d;  --pv-success-soft: #0f2a1c;  --pv-success-line: #1f5236;
    --pv-warning: #f5bf5a;  --pv-warning-soft: #2a1f0a;  --pv-warning-line: #5a4312;
    --pv-danger: #ff8a8e;   --pv-danger-soft: #2c1114;   --pv-danger-line: #5c2227;
    --pv-info: #7aa7ff;     --pv-info-soft: #0f1d38;     --pv-info-line: #22406f;
    --pv-teal: #5fd3c6;     --pv-teal-soft: #0d2826;
    --pv-shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --pv-shadow-hover: 0 8px 24px rgba(0, 0, 0, .35);
    --pv-shadow-elevated: 0 18px 48px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

/* ---- navigation continuity -------------------------------------------------------------------
 * Real document changes (e.g. dashboard -> video player -> back) cross-fade with the native View
 * Transitions API where supported; other browsers navigate normally. Nothing waits on it. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pv-vt-out var(--pv-dur-micro) var(--pv-ease-in) both; }
::view-transition-new(root) { animation: pv-vt-in var(--pv-dur-base) var(--pv-ease-out) both; }
@keyframes pv-vt-out { to { opacity: 0; } }
@keyframes pv-vt-in { from { opacity: 0; } }

/* Same-shell section / tab changes: only the content area enters (the shell never re-animates). */
@keyframes pv-enter { from { opacity: 0; transform: translateY(var(--pv-enter-shift)); } to { opacity: 1; transform: none; } }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pv-sheet { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pv-shimmer { to { background-position: -200% 0; } }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-enter { animation: pv-enter var(--pv-dur-base) var(--pv-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    :root { --pv-enter-shift: 0px; }
    .pv-enter { animation-name: pv-fade; }
}

/* ---- shared primitives (opt-in classes, safe on any page) --------------------------------------- */
.pv-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pv-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pv-sp-3) var(--pv-sp-6); margin-bottom: var(--pv-sp-4); }
.pv-page-title { margin: 0; font-size: var(--pv-fs-page); font-weight: var(--pv-fw-heavy); line-height: var(--pv-lh-tight); color: var(--pv-text); }
.pv-page-sub { margin: 2px 0 0; font-size: var(--pv-fs-helper); color: var(--pv-muted); }

.pv-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-radius-lg); box-shadow: var(--pv-shadow-card); padding: var(--pv-sp-4); min-width: 0; }

.pv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-sp-2);
    min-height: var(--pv-control-h); padding: 0 var(--pv-sp-4); border-radius: var(--pv-radius-md);
    border: 1px solid var(--pv-border); background: var(--pv-surface); color: var(--pv-text);
    font: inherit; font-size: var(--pv-fs-body-compact); font-weight: var(--pv-fw-bold); line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--pv-dur-micro) var(--pv-ease-out), border-color var(--pv-dur-micro) var(--pv-ease-out), color var(--pv-dur-micro) var(--pv-ease-out), transform 80ms ease;
}
.pv-btn:hover { border-color: var(--pv-border-strong); background: var(--pv-surface-muted); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn:focus-visible { outline: none; box-shadow: var(--pv-focus-ring); }
.pv-btn[disabled], .pv-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.pv-btn-primary { background: var(--pv-red); border-color: var(--pv-red); color: #fff; }
.pv-btn-primary:hover { background: var(--pv-red-hover); border-color: var(--pv-red-hover); color: #fff; }
.pv-btn-navy { background: var(--pv-navy); border-color: var(--pv-navy); color: #fff; }
.pv-btn-navy:hover { background: var(--pv-navy-hover); border-color: var(--pv-navy-hover); color: #fff; }
.pv-btn-ghost { background: transparent; border-color: transparent; color: var(--pv-muted); }
.pv-btn-danger { background: var(--pv-surface); border-color: var(--pv-danger-line); color: var(--pv-danger); }
.pv-btn-danger:hover { background: var(--pv-danger-soft); border-color: var(--pv-danger); }

.pv-input { width: 100%; min-height: var(--pv-control-h); padding: 0 var(--pv-sp-3); border: 1px solid var(--pv-border); border-radius: var(--pv-radius-md); background: var(--pv-surface); color: var(--pv-text); font: inherit; font-size: var(--pv-fs-body-compact); }
.pv-input:focus { outline: none; border-color: var(--pv-red); box-shadow: var(--pv-focus-ring); }

.pv-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border-radius: var(--pv-radius-pill); font-size: var(--pv-fs-caption); font-weight: var(--pv-fw-bold); white-space: nowrap; background: var(--pv-surface-muted); color: var(--pv-text-2); }
.pv-badge-brand { background: var(--pv-red-soft); color: var(--pv-red-ink); }
.pv-badge-info { background: var(--pv-info-soft); color: var(--pv-info); }
.pv-badge-success { background: var(--pv-success-soft); color: var(--pv-success); }
.pv-badge-warning { background: var(--pv-warning-soft); color: var(--pv-warning); }
.pv-badge-danger { background: var(--pv-danger-soft); color: var(--pv-danger); }
.pv-badge-archived { background: var(--pv-surface-sunken); color: var(--pv-subtle); }

.pv-empty { display: grid; justify-items: center; gap: var(--pv-sp-2); padding: var(--pv-sp-8) var(--pv-sp-4); text-align: center; color: var(--pv-muted); border: 1px dashed var(--pv-border); border-radius: var(--pv-radius-lg); background: var(--pv-surface); font-size: var(--pv-fs-helper); }
.pv-skeleton { border-radius: var(--pv-radius-md); background: linear-gradient(90deg, var(--pv-surface-muted) 25%, var(--pv-surface-sunken) 50%, var(--pv-surface-muted) 75%); background-size: 200% 100%; animation: pv-shimmer 1.2s infinite linear; }
@media (prefers-reduced-motion: reduce) { .pv-skeleton { animation: none; } }