/* css/base.css
   Shared design tokens and resets used across all pages.
─────────────────────────────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────────────────────────── */

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


/* ── Design tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --color-bg:          #09090B;
  --color-surface:     #111113;
  --color-surface-2:   #18181B;
  --color-border:      #27272A;
  --color-border-2:    #1F1F23;

  --color-text:        #FFFFFF;
  --color-text-muted:  #A1A1AA;
  --color-text-dim:    #71717A;
  --color-text-faint:  #52525B;
  --color-text-ghost:  #3F3F46;

  --color-accent:      #7C3AED;
  --color-accent-dark: #6D28D9;
  --color-accent-bg:   #1E1230;
  --color-accent-border: #3B1F6A;

  /* Feedback */
  --color-success-bg:     #052E16;
  --color-success-border: #14532D;
  --color-success-text:   #86EFAC;
  --color-error-bg:       #1C0A0A;
  --color-error-border:   #7F1D1D;
  --color-error-text:     #FCA5A5;

  /* Progress */
  --color-warning: #D97706;
  --color-danger:  #DC2626;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}


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

body {
  background:  var(--color-bg);
  color:       var(--color-text);
  font-family: var(--font-sans);
  min-height:  100vh;
}


/* ── Logo ────────────────────────────────────────────────────────────────────── */

.logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
  color:       inherit;
}

.logo-icon {
  width:           32px;
  height:          32px;
  background:      linear-gradient(135deg, #7C3AED, #4F46E5);
  border-radius:   7px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  flex-shrink:     0;
}

.logo-text {
  font-size:      17px;
  font-weight:    700;
  letter-spacing: -0.4px;
}


/* ── Card ────────────────────────────────────────────────────────────────────── */

.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       24px;
}

.card-label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  12px;
}


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

.btn-primary {
  width:         100%;
  background:    var(--color-accent);
  border:        none;
  border-radius: var(--radius-md);
  padding:       11px;
  font-size:     14px;
  font-weight:   600;
  color:         var(--color-text);
  cursor:        pointer;
  transition:    background 0.15s;
}

.btn-primary:hover    { background: var(--color-accent-dark); }
.btn-primary:disabled { background: var(--color-text-ghost); cursor: not-allowed; }

.btn-icon {
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  width:         38px;
  height:        38px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     15px;
  transition:    all 0.15s;
  flex-shrink:   0;
}

.btn-icon:hover { background: var(--color-border); border-color: #3F3F46; }


/* ── Feedback messages ───────────────────────────────────────────────────────── */

.message {
  margin-top:    16px;
  padding:       10px 14px;
  border-radius: var(--radius-md);
  font-size:     13px;
  display:       none;
}

.message.visible { display: block; }

.message.error {
  background: var(--color-error-bg);
  border:     1px solid var(--color-error-border);
  color:      var(--color-error-text);
}

.message.success {
  background: var(--color-success-bg);
  border:     1px solid var(--color-success-border);
  color:      var(--color-success-text);
}


/* ── Skeleton loader ─────────────────────────────────────────────────────────── */

.skeleton {
  display:             inline-block;
  background:          linear-gradient(90deg, #18181B 25%, #1F1F23 50%, #18181B 75%);
  background-size:     200% 100%;
  animation:           shimmer 1.4s infinite;
  border-radius:       var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}