/* CatchDate — Shared Design Tokens & Base Styles */

:root {
    --teal:       #0d9488;
    --teal-light: #14b8a6;
    --teal-bg:    #f0fdfa;
    --teal-mid:   #ccfbf1;
    --ink:        #0d1117;
    --ink-2:      #374151;
    --ink-3:      #6b7280;
    --surface:    #ffffff;
    --surface-2:  #f8fafb;
    --border:     #e5e7eb;
    --border-2:   #d1d5db;
    --radius:     14px;
    --radius-sm:  8px;
    --shadow:     0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.10);
    --font-head:  'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:  'DM Sans', system-ui, sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ─── SHARED SPINNER ─── */
.spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--ink-3);
    font-size: .9rem;
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--teal-mid);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── SHARED LOGO ─── */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--ink);
}
.logo-mark {
    background: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-mark svg { color: #fff; }

/* ─── SHARED POWERED-BY ─── */
.powered {
    text-align: center;
    font-size: .8rem;
    color: var(--border-2);
}
.powered a { color: var(--ink-3); transition: color .15s; }
.powered a:hover { color: var(--teal); }