@import "tailwindcss";

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  /* Fonts */
  --rb-font-ui:           'Manrope', system-ui, sans-serif;
  --rb-font-logo:         'Fraunces', Georgia, serif;

  /* Brand palette */
  --rb-ink:               #17201b;
  --rb-mist:              #eef2ef;
  --rb-brick:             #b5442e;
  --rb-brick-dark:        #7f2e20;
  --rb-sage:              #6c8774;

  /* Surfaces */
  --rb-bg:                #eef2ef;
  --rb-surface:           #ffffff;
  --rb-surface-2:         #e5ebe6;

  /* Borders */
  --rb-border:            #dde4de;
  --rb-border-mid:        #c5d0c6;
  --rb-border-strong:     #a8b8aa;

  /* Text */
  --rb-text:              #17201b;
  --rb-text-2:            #445049;
  --rb-text-3:            #7a9180;

  /* Accent — near-black */
  --rb-accent:            oklch(0.129 0.042 264.695);
  --rb-accent-hover:      oklch(0.22  0.042 264.695);
  --rb-accent-light:      oklch(0.96  0.015 264.695);
  --rb-accent-mid:        oklch(0.75  0.028 264.695);
  --rb-accent-dark:       oklch(0.08  0.028 264.695);
  --rb-accent-text:       white;
}

/* ── Tailwind theme registration ─────────────────────────────────── */
@theme {
  --font-sans:    'Manrope', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

/* ── Base defaults ───────────────────────────────────────────────── */
body {
  font-family: var(--rb-font-ui);
  background:  var(--rb-bg);
  color:       var(--rb-text);
  -webkit-font-smoothing: antialiased;
}

input[type="range"] { accent-color: var(--rb-accent); }

/* ── Page shells ─────────────────────────────────────────────────── */
.rb-page {
  min-height: 100vh;
}

.rb-editor-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--rb-bg);
}

/* Thin scrollbars inside the editor */
.rb-editor-page ::-webkit-scrollbar       { width: 5px; height: 5px; }
.rb-editor-page ::-webkit-scrollbar-track { background: transparent; }
.rb-editor-page ::-webkit-scrollbar-thumb { background: var(--rb-border-mid); border-radius: 3px; }

/* ── Mobile gate ─────────────────────────────────────────────────── */
.rb-mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--rb-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  z-index: 9999;
}

@media (max-width: 767px) {
  .rb-mobile-gate { display: flex; }
  .rb-dashboard-mobile-gate { display: none; }
  .rb-editor-page { display: none !important; }
  .rb-page {
    min-height: 100vh;
    overflow-x: hidden;
  }
  .rb-page form > div {
    flex-direction: column;
    align-items: stretch !important;
  }
  .rb-page a[href^="/dashboard/"] {
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .rb-page a[href^="/dashboard/"] > div:nth-child(2) {
    min-width: 0;
  }
  .rb-page a[href^="/dashboard/"] > div:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes rb-spin {
  to { transform: rotate(360deg); }
}
.rb-spin {
  animation: rb-spin 0.75s linear infinite;
}

@keyframes rb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

@keyframes rb-fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.rb-fade-up {
  animation: rb-fade-up 0.2s ease;
}

@keyframes rb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}