/* ============================================================
   VERIF SYSTEM — Light Luxe Theme
   Single source of truth for tokens. Per-page CSS imports this
   via link tag and adds only layout/typography deltas.
   ============================================================ */
:root{
    /* Surfaces (warm white, gold-tinted) */
    --bg:           #faf8f2;
    --bg-2:         #f4f1e8;
    --surface:      #ffffff;
    --surface-2:    #faf8f2;
    --surface-3:    #f0ece1;
    --surface-tint: rgba(212,175,55,0.045);

    /* Borders */
    --border:       #e9e3cf;
    --border-2:     #d8d0b4;
    --border-soft:  #f2eee0;

    /* Brand gold + accent */
    --gold:         #d4af37;
    --gold-h:       #c9a13a;
    --gold-2:       #b8962e;
    --gold-soft:    #f5e9c1;
    --gold-glow:    rgba(212,175,55,0.35);

    /* Text */
    --text:         #1c1a14;
    --text-2:       #4a463a;
    --text-dim:     #6d6750;
    --text-mute:    #9a927a;

    /* States */
    --success:      #1e7a3c;
    --success-bg:   #d8f1df;
    --success-2:    #166832;
    --danger:       #a01616;
    --danger-bg:    #fbe2e2;
    --danger-2:     #8a0d0d;
    --warning:      #8a4a0a;
    --warning-bg:   #fdf0d2;
    --info:         #1c4ed8;
    --info-bg:      #dbe6fb;

    /* Geometry */
    --radius:       16px;
    --radius-sm:    10px;
    --radius-lg:    22px;

    /* Shadow */
    --shadow-xs:    0 1px 2px rgba(60,50,15,0.05);
    --shadow-sm:    0 2px 8px rgba(60,50,15,0.06), 0 1px 2px rgba(60,50,15,0.04);
    --shadow-md:    0 8px 24px rgba(60,50,15,0.08), 0 2px 6px rgba(60,50,15,0.05);
    --shadow-lg:    0 20px 60px rgba(60,50,15,0.12), 0 6px 18px rgba(60,50,15,0.06);
    --shadow-pop:   0 14px 40px rgba(212,175,55,0.22), 0 6px 14px rgba(60,50,15,0.06);

    /* Motion */
    --t:            0.18s cubic-bezier(0.4,0,0.2,1);
    --t-slow:       0.36s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::selection, ::selection{background:var(--gold);color:#1a1409}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,100,40,0.18);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,100,40,0.32)}

a{color:var(--gold-2);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--gold-h)}

img{max-width:100%;display:block}

/* ============== CARDS ============== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:border-color var(--t),box-shadow var(--t),transform var(--t);position:relative}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-2)}
.card-elev{background:linear-gradient(180deg,#ffffff 0%,#fbf8ec 100%);box-shadow:var(--shadow-md)}
.card-title{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.card-title i{font-size:13px;opacity:.85}
.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:var(--text-mute);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.section-label i{color:var(--gold-2);opacity:0.7;font-size:11px}

/* ============== INPUTS ============== */
.input,.form-control,.form-select{
    background:var(--surface)!important;
    border:1px solid var(--border-2)!important;
    border-radius:var(--radius-sm)!important;
    color:var(--text)!important;
    font-family:inherit;
    font-size:13px;
    padding:10px 13px;
    transition:all var(--t);
    width:100%;
}
.input:focus,.form-control:focus,.form-select:focus{
    border-color:var(--gold)!important;
    box-shadow:0 0 0 4px rgba(212,175,55,0.18)!important;
    outline:none;
}
.input::placeholder,.form-control::placeholder{color:var(--text-mute)}
label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-dim);margin-bottom:6px;display:block}
textarea.input,textarea.form-control{resize:vertical;min-height:80px;line-height:1.6}

/* ============== BUTTONS ============== */
.btn-gold,.btn-primary{
    background:linear-gradient(135deg,#e8c84e 0%,var(--gold) 50%,var(--gold-2) 100%);
    color:#1a1409;
    border:none;
    font-weight:700;
    font-size:11px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:11px 20px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all var(--t);
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    box-shadow:var(--shadow-xs);
}
.btn-gold:hover,.btn-primary:hover{background:linear-gradient(135deg,#f3d363 0%,#e0bb41 50%,#c9a13a 100%);box-shadow:var(--shadow-pop);transform:translateY(-1px);color:#1a1409}
.btn-gold:active,.btn-primary:active{transform:translateY(0)}

.btn-ghost{
    background:var(--surface);
    color:var(--text-2);
    border:1px solid var(--border-2);
    font-size:11px;
    font-weight:600;
    padding:9px 16px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all var(--t);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.btn-ghost:hover{color:var(--text);border-color:var(--gold);background:var(--surface-tint)}
.btn-danger-soft{background:var(--danger-bg);color:var(--danger);border:1px solid #f5b1b1}
.btn-danger-soft:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ============== ALERTS ============== */
.alert-mini,.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:11.5px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.alert-mini.success,.alert.success{background:var(--success-bg);border:1px solid #95dbb0;color:var(--success-2)}
.alert-mini.error,.alert.error{background:var(--danger-bg);border:1px solid #f5b1b1;color:var(--danger-2)}
.alert-mini.info,.alert.info{background:var(--info-bg);border:1px solid #a9c0f0;color:var(--info)}
.alert-mini.warning,.alert.warning{background:var(--warning-bg);border:1px solid #f3d27a;color:var(--warning)}

/* ============== CHIPS & BADGES ============== */
.chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 11px;
    background:var(--surface-3);
    border:1px solid var(--border);
    border-radius:14px;
    font-size:10px;
    font-weight:600;
    color:var(--text-2);
    letter-spacing:0.4px;
}
.chip.code{font-family:'JetBrains Mono','SF Mono','Consolas',monospace;font-size:10px;color:var(--text);background:#f6f1dd;border-color:var(--gold-soft);letter-spacing:0.5px}
.chip.gold{background:linear-gradient(135deg,#fff5d4,#f5e9c1);border-color:var(--gold-soft);color:#7d5915;font-weight:700}
.chip.green{background:var(--success-bg);border-color:#95dbb0;color:var(--success-2);font-weight:700}
.chip.red{background:var(--danger-bg);border-color:#f5b1b1;color:var(--danger-2);font-weight:700}
.chip.blue{background:var(--info-bg);border-color:#a9c0f0;color:var(--info);font-weight:700}
.chip.purple{background:#efe5fb;border-color:#c9b0f0;color:#5a2bb0;font-weight:700}

.badge-super{background:linear-gradient(135deg,#fff5d4,#f5e9c1);color:#7d5915;padding:4px 12px;border-radius:14px;font-size:10px;font-weight:700;letter-spacing:0.6px;border:1px solid var(--gold-soft);text-transform:uppercase}
.badge-brand{background:var(--info-bg);color:var(--info);padding:4px 12px;border-radius:14px;font-size:10px;font-weight:700;letter-spacing:0.6px;border:1px solid #a9c0f0;text-transform:uppercase}
.badge-operator{background:var(--surface-3);color:var(--text-dim);padding:4px 12px;border-radius:14px;font-size:10px;font-weight:600;letter-spacing:0.6px;border:1px solid var(--border);text-transform:uppercase}

/* ============== TABLES ============== */
.table-admin,.data-table{
    width:100%;
    font-size:12.5px;
    border-collapse:separate;
    border-spacing:0;
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow-xs);
}
.table-admin thead th,.data-table thead th{
    color:var(--text-mute);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    padding:11px 16px;
    background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface-3) 100%);
    border-bottom:2px solid var(--border);
    text-align:left;
    white-space:nowrap;
}
.table-admin tbody td,.data-table tbody td{
    padding:12px 16px;
    border-bottom:1px solid var(--border-soft);
    color:var(--text);
}
.table-admin tbody tr:last-child td,.data-table tbody tr:last-child td{border-bottom:none}
.table-admin tbody tr:hover td,.data-table tbody tr:hover td{background:var(--surface-tint)}

.mono-sm{font-family:'JetBrains Mono','SF Mono','Consolas',monospace;font-size:11.5px;color:var(--text-2)}
.item-meta{font-size:10.5px;color:var(--text-mute)}
.color-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;border:2px solid #fff;box-shadow:0 0 8px rgba(0,0,0,0.10)}

/* ============== SHARED ANIMATIONS ============== */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes sealGlow{0%,100%{box-shadow:0 0 0 0 var(--gold-glow)}50%{box-shadow:0 0 0 18px rgba(212,175,55,0)}}
@keyframes brandEnter{from{opacity:0;transform:translateY(20px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.anim{animation:fadeIn 0.45s ease both}
.anim-up{animation:fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) both}
.anim-brand{animation:brandEnter 0.6s cubic-bezier(0.34,1.56,0.64,1) both}
.stagger > * { animation: fadeInUp 0.45s ease both; } .stagger > *:nth-child(1){animation-delay:.04s} .stagger > *:nth-child(2){animation-delay:.10s} .stagger > *:nth-child(3){animation-delay:.16s} .stagger > *:nth-child(4){animation-delay:.22s} .stagger > *:nth-child(5){animation-delay:.28s} .stagger > *:nth-child(6){animation-delay:.34s}

@media(max-width:768px){.card{padding:18px}}