/* ============================================================
   Clips Player — common.css
   Design system tokens + base reset + cross-page primitives.
   See docs/DESIGN_SYSTEM.md for the full system.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* ── Color ───────────────────────────────────────────── */
    --ink-0:        #0e0e0c;
    --ink-2:        #1a1a17;
    --ink-3:        #23231f;
    --rule:         #2c2c27;
    --rule-strong:  #3f3f37;
    --bone:         #f4f1e8;
    --bone-dim:     #8a877b;
    --bone-faint:   #4d4a42;
    --signal:       #b4ff39;
    --signal-ink:   #0e0e0c;
    --warn:         #ff7a3d;
    --err:          #ff4d6a;
    --ok:           #7ee2a6;

    /* ── Type ─────────────────────────────────────────────── */
    /* Single sans throughout; mono only for data/labels. */
    --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    --t-display-1: clamp(2.5rem, 5.5vw, 4.25rem);
    --t-display-2: clamp(1.5rem, 2.6vw, 2rem);
    --t-h1:        1.375rem;
    --t-h2:        1.0625rem;
    --t-body:      0.875rem;
    --t-meta:      0.75rem;
    --t-label:     0.6875rem;
    --t-micro:     0.625rem;

    --ls-label:    0.12em;
    --ls-display: -0.035em;
    --ls-tight:   -0.015em;

    /* ── Spacing (4px scale) ──────────────────────────────── */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-10:128px;

    /* ── Radius ───────────────────────────────────────────── */
    --r-0:     0;
    --r-1:     2px;
    --r-2:     4px;
    --r-pill:  999px;

    /* ── Motion ───────────────────────────────────────────── */
    --ease:      cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast:  120ms;
    --dur-mid:   220ms;
    --dur-slow:  440ms;
}

/* ────────────────────────────────────────────────────────────
   Base
   ──────────────────────────────────────────────────────────── */

html, body {
    background: var(--ink-0);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv01";
    font-variant-numeric: tabular-nums;
    min-height: 100vh;
}

::selection { background: var(--signal); color: var(--signal-ink); }

a { color: var(--bone); text-decoration: none; }
a:hover { color: var(--signal); }

/* ────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────── */

.btn {
    --bg: transparent;
    --bd: var(--rule);
    --fg: var(--bone);
    appearance: none;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--bd);
    border-radius: var(--r-1);
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ls-tight);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--ink-3); border-color: var(--rule-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
    --bg: var(--signal);
    --bd: var(--signal);
    --fg: var(--signal-ink);
    font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
    --bg: #c8ff5e;
    --bd: #c8ff5e;
}

.btn-danger {
    --bg: transparent;
    --bd: color-mix(in srgb, var(--err) 50%, var(--rule));
    --fg: var(--err);
}
.btn-danger:hover:not(:disabled) {
    --bg: color-mix(in srgb, var(--err) 12%, transparent);
    --bd: var(--err);
}

.btn-ghost {
    --bd: transparent;
    --fg: var(--bone-dim);
}
.btn-ghost:hover:not(:disabled) { --fg: var(--bone); background: transparent; border-color: transparent; }

.btn-sm { padding: 5px 10px; font-size: var(--t-meta); }

/* ────────────────────────────────────────────────────────────
   Inputs
   ──────────────────────────────────────────────────────────── */

input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], select, textarea {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    padding: 8px 10px;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bone);
    background: var(--ink-3);
}
input::placeholder, textarea::placeholder { color: var(--bone-faint); }

input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
                      linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
}

input[type="checkbox"] {
    appearance: none;
    width: 14px; height: 14px;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input[type="checkbox"]:hover { border-color: var(--bone-dim); }
input[type="checkbox"]:checked {
    background: var(--signal);
    border-color: var(--signal);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 2px 3px 3px 3px;
    border-right: 2px solid var(--signal-ink);
    border-bottom: 2px solid var(--signal-ink);
    transform: rotate(45deg) translate(-1px, -1px);
    width: 4px; height: 7px;
}

/* ────────────────────────────────────────────────────────────
   Labels & micro-type
   ──────────────────────────────────────────────────────────── */

.label, .micro-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--bone-dim);
}
.label  { font-size: var(--t-label); }
.micro-label { font-size: var(--t-micro); }

.label::before { content: '· '; color: var(--bone-faint); }

.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bone   { color: var(--bone); }
.dim    { color: var(--bone-dim); }
.faint  { color: var(--bone-faint); }
.signal { color: var(--signal); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ────────────────────────────────────────────────────────────
   Status pills
   ──────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    padding: 3px 7px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    color: var(--bone-dim);
    background: transparent;
    white-space: nowrap;
}
.pill-in       { border-color: var(--signal); color: var(--signal); }
.pill-out      { border-color: var(--err); color: var(--err); }
.pill-featured { border-color: var(--warn); color: var(--warn); }

/* ────────────────────────────────────────────────────────────
   Toast
   ──────────────────────────────────────────────────────────── */

#toast-container {
    position: fixed;
    bottom: var(--sp-5);
    right: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 1000;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-left: 2px solid var(--bone-dim);
    border-radius: var(--r-1);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--t-body);
    color: var(--bone);
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    min-width: 260px;
    animation: toast-in var(--dur-mid) var(--ease);
}
.toast::before {
    content: '[•]';
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-label);
    color: var(--bone-dim);
    flex-shrink: 0;
}
.toast.success { border-left-color: var(--signal); }
.toast.success::before { content: '[OK]'; color: var(--signal); }
.toast.error   { border-left-color: var(--err); }
.toast.error::before { content: '[ERR]'; color: var(--err); }

@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
   Scrollbars
   ──────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 2px solid var(--ink-0); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }

/* ────────────────────────────────────────────────────────────
   Tier badge (user chip)
   ──────────────────────────────────────────────────────────── */

.tier-badge {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    padding: 2px 6px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    color: var(--bone-faint);
    line-height: 1.4;
    white-space: nowrap;
}
.tier-badge.tier-none  { color: var(--bone-faint); border-color: var(--rule); }
.tier-badge.tier-free  { color: var(--bone-dim);   border-color: var(--rule-strong); }
.tier-badge.tier-pro   { color: var(--signal);     border-color: var(--signal); }
.tier-badge.tier-admin { color: var(--warn);       border-color: var(--warn); }
a.tier-badge:hover     { opacity: 0.8; color: inherit; }

/* ────────────────────────────────────────────────────────────
   Pending state (dashboard, no access)
   ──────────────────────────────────────────────────────────── */

.pending-state {
    grid-column: 1 / -1;
    padding: var(--sp-9) var(--sp-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}
.pending-icon {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    color: var(--bone-faint);
    animation: pending-blink 2s steps(1) infinite;
}
@keyframes pending-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
.pending-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--t-h1);
    color: var(--bone);
    letter-spacing: var(--ls-tight);
}
.pending-body {
    font-size: var(--t-body);
    color: var(--bone-dim);
    max-width: 44ch;
    line-height: 1.6;
}
.pending-login {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-top: var(--sp-2);
}
.pending-login-value { color: var(--bone-dim); }

/* ────────────────────────────────────────────────────────────
   Utilities
   ──────────────────────────────────────────────────────────── */

.hidden { display: none !important; }
.spacer { flex: 1; }