/* ═══════════════════════════════════════════════════════
   OPIKIT™ — Smart Business Identity Kit
   CSS Design System — Phase 1
   A Redanglo Private Limited Product
   ═══════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────── */
:root {
    --ink:        #0A0A0A;
    --graphite:   #1C1C1C;
    --stone:      #F5F2EB;
    --bone:       #EDE8DD;
    --gold:       #B8924B;
    --gold-soft:  #D4B679;
    --steel:      #3D4148;
    --muted:      #7A7770;
    --line-light: rgba(10,10,10,0.08);
    --line-dark:  rgba(245,242,235,0.12);
    --success:    #2D5A3D;
    --danger:     #8B2E2E;
    --warning:    #B8924B;
    --info:       #3D4148;

    --font-display: 'Fraunces', 'Georgia', serif;
    --font-ui:      'Inter Tight', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

    --radius-xs:  2px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-pill: 999px;
}

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; font-size:16px; }
body {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--stone);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ink); text-decoration: none; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ─── TYPOGRAPHY ────────────────────────────────────── */
.display-xl { font-family:var(--font-display); font-weight:300; font-size:56px; line-height:1; letter-spacing:-0.035em; }
.display-l  { font-family:var(--font-display); font-weight:300; font-size:40px; line-height:1.1; letter-spacing:-0.03em; }
.headline   { font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.2; letter-spacing:-0.02em; }
.headline em { font-style:italic; }
.title      { font-family:var(--font-ui); font-weight:500; font-size:20px; line-height:1.3; letter-spacing:-0.01em; }
.lede       { font-family:var(--font-ui); font-weight:400; font-size:17px; line-height:1.4; letter-spacing:-0.005em; }
.body-s     { font-family:var(--font-ui); font-weight:400; font-size:13px; line-height:1.45; }
.ui-label   { font-family:var(--font-ui); font-weight:500; font-size:13px; line-height:1.2; }
.caption    { font-family:var(--font-mono); font-weight:500; font-size:10px; line-height:1.4; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.text-gold  { color:var(--gold); }
.text-muted { color:var(--muted); }
.text-steel { color:var(--steel); }
.text-center { text-align:center; }

/* ─── LAYOUT ────────────────────────────────────────── */
.container { max-width:440px; margin:0 auto; padding:0 20px; }
.admin-container { max-width:720px; }
.page-wrapper { min-height:100vh; padding-bottom:80px; background:var(--stone); }
.page-content { padding-top:8px; padding-bottom:32px; }
.d-flex { display:flex; }
.flex-col { flex-direction:column; }
.gap-xs { gap:6px; }
.gap-sm { gap:12px; }
.gap-md { gap:16px; }
.gap-lg { gap:24px; }
.justify-between { justify-content:space-between; }
.items-center { align-items:center; }
.w-full { width:100%; }
.mt-xs { margin-top:6px; }
.mt-sm { margin-top:12px; }
.mt-md { margin-top:16px; }
.mt-lg { margin-top:24px; }
.mt-xl { margin-top:32px; }
.mb-xs { margin-bottom:6px; }
.mb-sm { margin-bottom:12px; }
.mb-lg { margin-bottom:24px; }

/* ─── APP HEADER ────────────────────────────────────── */
.app-header {
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; max-width:440px; margin:0 auto;
    background:var(--stone);
    border-bottom:0.5px solid var(--line-light);
}
.app-logo { display:flex; align-items:center; gap:8px; }
.app-logo-text { font-family:var(--font-display); font-weight:400; font-size:18px; letter-spacing:-0.02em; }

/* ─── BOTTOM NAV ────────────────────────────────────── */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    display:flex; justify-content:space-around;
    background:var(--stone);
    border-top:0.5px solid var(--line-light);
    padding:8px 0 env(safe-area-inset-bottom,8px);
}
.bottom-nav a {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 12px; color:var(--muted); font-size:10px; font-weight:500;
    letter-spacing:0.02em; text-decoration:none; transition:color 200ms;
}
.bottom-nav a svg { width:20px; height:20px; }
.bottom-nav a.active { color:var(--ink); }
.bottom-nav a.active svg { stroke-width:2; }

/* ─── CARDS ─────────────────────────────────────────── */
.card {
    background:#fff; border-radius:var(--radius-md);
    border:0.5px solid var(--line-light);
    overflow:hidden;
}
.card-body { padding:24px 20px; }
.card-body-compact { padding:16px 20px; }

/* ─── PREMIUM CARD (Preview on Dashboard) ───────────── */
.premium-card {
    background:var(--ink);
    border-radius:var(--radius-md);
    padding:32px 24px 28px;
    color:var(--stone);
    position:relative;
    overflow:hidden;
}
.premium-card::after {
    content:''; position:absolute; top:-40%; right:-20%; width:60%; height:180%;
    background:linear-gradient(135deg,transparent 40%,rgba(184,146,75,0.06) 50%,transparent 60%);
    transform:rotate(-15deg); pointer-events:none;
}
.premium-card-name {
    font-family:var(--font-display); font-weight:300; font-size:28px;
    letter-spacing:-0.025em; line-height:1.1;
}
.premium-card-meta {
    font-family:var(--font-ui); font-size:13px; font-weight:400;
    color:rgba(245,242,235,0.5); margin-top:6px;
}
.premium-card-url {
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em;
    color:var(--gold-soft); margin-top:20px; text-transform:lowercase;
}

/* ─── BUTTONS ───────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-ui); font-weight:500; font-size:13px;
    padding:12px 24px; border:none; cursor:pointer; text-decoration:none;
    border-radius:var(--radius-pill); transition:all 200ms ease-out;
    -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.btn-primary { background:var(--ink); color:var(--stone); }
.btn-primary:hover { background:var(--graphite); }
.btn-secondary { background:transparent; color:var(--ink); border:0.5px solid var(--line-light); }
.btn-secondary:hover { background:var(--bone); }
.btn-gold { background:var(--gold); color:var(--ink); font-weight:600; }
.btn-gold:hover { background:var(--gold-soft); }
.btn-destructive { background:transparent; color:var(--danger); border:0.5px solid rgba(139,46,46,0.15); }
.btn-block { display:flex; width:100%; }
.btn-lg { padding:16px 32px; font-size:14px; }
.btn-xl { padding:18px 36px; font-size:15px; min-height:52px; }
.btn-sm { padding:8px 16px; font-size:12px; border-radius:var(--radius-pill); }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ─── FORMS ─────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label {
    display:block; font-family:var(--font-ui); font-weight:500;
    font-size:13px; color:var(--steel); margin-bottom:8px;
}
.form-input, .form-select, .form-textarea {
    width:100%; padding:14px 16px;
    font-family:var(--font-ui); font-size:15px; font-weight:400; color:var(--ink);
    background:#fff; border:0.5px solid var(--line-light);
    border-radius:var(--radius-sm); outline:none;
    transition:border-color 200ms;
    -webkit-appearance:none; appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color:var(--gold);
}
.form-textarea { resize:vertical; min-height:80px; line-height:1.5; }
.form-select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7770' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.form-helper { font-size:12px; color:var(--muted); margin-top:6px; }
.form-input-group { display:flex; align-items:stretch; }
.form-input-group .form-prefix {
    display:flex; align-items:center; padding:0 12px;
    background:var(--bone); border:0.5px solid var(--line-light);
    border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm);
    font-size:13px; color:var(--muted); white-space:nowrap;
}
.form-input-group .form-input { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.form-section-title {
    font-family:var(--font-mono); font-weight:500; font-size:10px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
    margin-bottom:24px;
}
.form-section-title::before { content:'— '; }

/* ─── ALERTS ────────────────────────────────────────── */
.alert {
    padding:14px 20px; margin-bottom:16px; border-radius:var(--radius-sm);
    font-size:13px; line-height:1.5;
}
.alert-error { background:rgba(139,46,46,0.06); color:var(--danger); border-left:2px solid var(--danger); }
.alert-success { background:rgba(45,90,61,0.06); color:var(--success); border-left:2px solid var(--success); }
.alert-info { background:rgba(61,65,72,0.06); color:var(--steel); border-left:2px solid var(--steel); }

/* ─── AUTH PAGES ────────────────────────────────────── */
.auth-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px 20px; background:var(--stone);
}
.auth-card { width:100%; max-width:400px; }
.auth-header { text-align:center; margin-bottom:32px; }
.auth-footer { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
.auth-footer a { color:var(--ink); font-weight:500; }
.error-page { text-align:center; }
.error-page .headline { margin-bottom:12px; }
.error-page p { color:var(--muted); margin-bottom:24px; }

/* ─── STAT GRID ─────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stat-card {
    text-align:center; padding:16px 8px;
    background:#fff; border-radius:var(--radius-md);
    border:0.5px solid var(--line-light);
}
.stat-number {
    font-family:var(--font-display); font-weight:300; font-size:24px;
    letter-spacing:-0.02em; line-height:1; color:var(--ink);
}
.stat-label {
    font-family:var(--font-mono); font-weight:500; font-size:9px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:6px;
}

/* ─── CONTACT LIST ──────────────────────────────────── */
.contact-list { border-top:0.5px solid var(--line-light); }
.contact-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0; border-bottom:0.5px solid var(--line-light);
    gap:12px;
}
.contact-label {
    font-family:var(--font-mono); font-weight:500; font-size:10px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
    min-width:64px; flex-shrink:0;
}
.contact-value { font-size:14px; color:var(--steel); text-align:right; word-break:break-all; }
.contact-value a { color:var(--steel); }

/* ─── PROFILE PAGE (PUBLIC MINI-WEBSITE) ────────────── */
.profile-page {
    max-width:440px; margin:0 auto; padding:0 20px;
    min-height:100vh; background:var(--stone);
}
.profile-avatar-section { text-align:center; padding:48px 0 32px; }
.profile-avatar {
    width:120px; height:120px; border-radius:50%; object-fit:cover;
    margin:0 auto 20px; border:1px solid var(--line-light);
}
.profile-avatar-placeholder {
    width:120px; height:120px; border-radius:50%; margin:0 auto 20px;
    background:var(--ink); color:var(--stone);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:36px; font-weight:300;
}
.profile-name {
    font-family:var(--font-display); font-weight:300; font-size:32px;
    letter-spacing:-0.025em; line-height:1.15;
}
.profile-role { font-size:15px; color:var(--steel); margin-top:4px; }
.profile-bio {
    font-size:14px; color:var(--muted); line-height:1.6;
    margin-top:16px; max-width:340px; margin-left:auto; margin-right:auto;
}
.profile-cta-section {
    display:flex; gap:12px; padding:0 0 32px;
}
.profile-section { padding:24px 0; }

.section-eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:10px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
    margin-bottom:16px;
}
.section-eyebrow::before { content:'— '; }

.social-row { display:flex; flex-wrap:wrap; gap:8px; }
.social-pill {
    display:inline-flex; padding:10px 18px; border-radius:var(--radius-pill);
    border:0.5px solid var(--line-light); font-size:13px; font-weight:500;
    color:var(--steel); background:#fff; transition:all 200ms;
}
.social-pill:hover { background:var(--bone); color:var(--ink); }

.gold-divider {
    width:40px; height:0.5px; background:var(--gold);
    margin:0 auto 32px; opacity:0.5;
}

/* ─── LEAD CAPTURE ──────────────────────────────────── */
.lead-capture {
    margin-top:32px; padding:32px 0;
    border-top:0.5px solid var(--line-light);
}
.lead-capture .headline { font-size:24px; margin-bottom:8px; }
.lead-capture p { font-size:14px; color:var(--muted); margin-bottom:24px; }
.privacy-note {
    font-family:var(--font-mono); font-size:9px; letter-spacing:0.08em;
    color:var(--muted); text-align:center; margin-top:16px;
    text-transform:uppercase; opacity:0.5;
}

/* ─── PROFILE FOOTER ────────────────────────────────── */
.profile-footer {
    text-align:center; padding:48px 0 32px;
    border-top:0.5px solid var(--line-light);
}
.profile-footer-brand {
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--muted);
}

/* ─── BADGES ────────────────────────────────────────── */
.badge {
    display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
    font-family:var(--font-mono); font-size:9px; letter-spacing:0.08em;
    text-transform:uppercase; font-weight:500;
}
.badge-success { background:rgba(45,90,61,0.08); color:var(--success); }
.badge-warning { background:rgba(184,146,75,0.1); color:var(--gold); }
.badge-danger  { background:rgba(139,46,46,0.08); color:var(--danger); }
.badge-info    { background:rgba(61,65,72,0.08); color:var(--steel); }

/* ─── TABLE ─────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table {
    width:100%; border-collapse:collapse; font-size:13px;
}
.data-table th {
    font-family:var(--font-mono); font-weight:500; font-size:9px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
    text-align:left; padding:12px 12px; border-bottom:0.5px solid var(--line-light);
}
.data-table td {
    padding:12px; border-bottom:0.5px solid var(--line-light);
    vertical-align:middle; color:var(--steel);
}
.data-table tr:last-child td { border-bottom:none; }

/* ─── PAGINATION ────────────────────────────────────── */
.pagination {
    display:flex; gap:6px; justify-content:center; padding:24px 0;
}
.pagination a, .pagination .current {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:var(--radius-pill);
    font-size:13px; font-weight:500;
}
.pagination a { border:0.5px solid var(--line-light); color:var(--steel); }
.pagination .current { background:var(--ink); color:var(--stone); }

/* ─── ANIMATIONS ────────────────────────────────────── */
.animate-in {
    opacity:0; transform:translateY(16px);
    animation:fadeUp 500ms ease-out forwards;
}
.delay-1 { animation-delay:100ms; }
.delay-2 { animation-delay:200ms; }
.delay-3 { animation-delay:300ms; }
.delay-4 { animation-delay:400ms; }

@keyframes fadeUp {
    to { opacity:1; transform:translateY(0); }
}

/* ─── MOBILE TWEAKS ─────────────────────────────────── */
@media (max-width:380px) {
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .premium-card-name { font-size:24px; }
    .profile-name { font-size:28px; }
}

@media (min-width:768px) {
    .profile-page { padding:0 40px; }
    .container { padding:0 32px; }
}