/* base.css — tokens, type and layout. Pepla Blush, from the internal-tools-ui style guide.
   Every colour, size and spacing number here comes from that guide; none is invented.
   Tints of the accent are written with color-mix on --accent, so one rule serves both themes. */

/* gate.js sets this in <head>; auth.js removes it once the site knows who is signed in. */
html.checking body { visibility: hidden; }

:root,
[data-theme="dark"] {
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface2: #16213e;
  --border: rgba(213, 169, 153, 0.18);

  --accent: #D5A999;
  --accent-hover: #CC9783;
  --accent-active: #BE8974;
  --accent-light: #D7BFB6;
  --on-accent: #1a1a2e;

  --text: #f0ede6;
  --text-muted: #9a9098;
  --text-placeholder: rgba(240, 237, 230, 0.4);
  --text-disabled: rgba(240, 237, 230, 0.3);

  --success: #4ade80;
  --error: #f87171;
  --warning: #fbbf24;
  --info: #c084fc;
  --processing: #60a5fa;

  --overlay: rgba(0, 0, 0, 0.65);
  --disabled-bg: rgba(255, 255, 255, 0.02);
  --disabled-border: rgba(255, 255, 255, 0.06);
  --hover-bg: rgba(255, 255, 255, 0.03);

  --input-border: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(255, 255, 255, 0.04);
  --dashed-border: rgba(255, 255, 255, 0.12);
  --card-shadow: none;
  --float-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  --radius: 12px;
  --radius-sm: 8px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Playfair Display', serif;
  --sans: 'DM Sans', sans-serif;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --menu-width: 170px;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface2: #F5F3EF;
  --border: #E8E5DF;

  --accent: #B16043;
  --accent-hover: #9B543A;
  --accent-active: #854832;
  --accent-light: #C2795F;
  --on-accent: #FFFFFF;

  --text: #1A1A1A;
  --text-muted: #6B6560;
  --text-placeholder: rgba(26, 26, 26, 0.35);
  --text-disabled: rgba(26, 26, 26, 0.3);

  --success: #15803D;
  --error: #DC2626;
  --warning: #B45309;
  --info: #7C3AED;
  --processing: #2563EB;

  --overlay: rgba(0, 0, 0, 0.4);
  --disabled-bg: rgba(0, 0, 0, 0.02);
  --disabled-border: rgba(0, 0, 0, 0.06);
  --hover-bg: rgba(0, 0, 0, 0.02);

  --input-border: #E8E5DF;
  --input-bg: #FFFFFF;
  --dashed-border: rgba(0, 0, 0, 0.12);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  --float-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  color-scheme: light;
}

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

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(192, 132, 252, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, p { margin: 0; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.3;
}
h1 { font-size: 20px; }
h2 { font-size: 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

svg.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.icon.sm { width: 16px; height: 16px; }
svg.icon.lg { width: 24px; height: 24px; }

.mono { font-family: var(--mono); }
.muted { color: var(--text-muted); }
.caption { font-size: 11px; color: var(--text-muted); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- App layout: side menu + header + content ---------- */

.app {
  display: grid;
  grid-template-columns: var(--menu-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--duration-base) var(--ease);
}
.app.menu-collapsed { --menu-width: 56px; }

.app-main { min-width: 0; display: flex; flex-direction: column; }

.content {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn var(--duration-slow) var(--ease);
}

/* Narrow, form-style pages (sign-in). */
.container-narrow {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 16px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
@keyframes spin  { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 16px; }
  .container-narrow { padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}