/* ============================================================
   Startuperr Design Tokens — v1
   Light, clean, one accent. The accent belongs to the AI.
   Every module inherits these; no per-app palettes.
   ============================================================ */

:root {
  /* ── Surfaces ── */
  --su-page:        #fafafa;
  --su-surface:     #ffffff;
  --su-raised:      #ffffff;
  --su-inset:       #f4f4f5;

  /* ── Text ── */
  --su-text:        #18181b;
  --su-text-2:      #52525b;
  --su-text-3:      #a1a1aa;

  /* ── Borders ── */
  --su-border:      #e4e4e7;
  --su-border-2:    #d4d4d8;

  /* ── The AI accent (reserved: only AI surfaces use it) ── */
  --su-ai:          #7c3aed;
  --su-ai-strong:   #6d28d9;
  --su-ai-soft:     #f5f3ff;
  --su-ai-border:   #ddd6fe;

  /* ── Semantic ── */
  --su-success:        #16a34a;
  --su-success-bg:     #f0fdf4;
  --su-danger:         #dc2626;
  --su-danger-strong:  #b91c1c;
  --su-danger-bg:      #fef2f2;
  --su-danger-border:  #fecaca;
  --su-warning:        #d97706;
  --su-warning-bg:     #fffbeb;

  /* ── Type ── */
  --su-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --su-fs-xs: 0.6875rem;
  --su-fs-sm: 0.7812rem;
  --su-fs-md: 0.875rem;
  --su-fs-lg: 1rem;
  --su-fs-xl: 1.25rem;
  --su-fs-2xl: 1.625rem;

  /* ── Shape & depth ── */
  --su-radius:      0.625rem;
  --su-radius-lg:   1rem;
  --su-shadow-sm:   0 1px 2px rgba(24,24,27,.05);
  --su-shadow-md:   0 4px 16px rgba(24,24,27,.08);
  --su-shadow-lg:   0 12px 40px rgba(24,24,27,.14);
  --su-ai-glow:     0 0 0 1px var(--su-ai-border), 0 4px 24px rgba(124,58,237,.16);

  /* ── Motion (state, not decoration) ── */
  --su-dur-fast:    120ms;
  --su-dur:         200ms;
  --su-dur-slow:    360ms;
  --su-ease:        cubic-bezier(.2,.8,.2,1);
  --su-ease-spring: cubic-bezier(.34,1.4,.4,1);
}

/* ── The size of everything ──────────────────────────────────
   Every size in the product is rem, so this one number scales the whole
   interface — type, spacing, controls, Tailwind's classes with it.

   WHY IT STEPS. A laptop at Windows' 150% display scaling hands a page about
   1280×600 CSS pixels, and each of those pixels is physically large: the app
   read as "too big at 100%" there and right at 80% browser zoom. So the root
   shrinks where a CSS pixel is physically large — a device-pixel ratio from
   Windows scaling (1.25 or 1.5), on a window too narrow for the extra pixels
   to have become extra room.

   Retina and 4K-at-200% screens report 2x or more and are left at 100%:
   their CSS pixels are already small, and shrinking them again would make
   the text genuinely tiny. A person who has zoomed the browser changes the
   ratio too, so their zoom still works on top of this.
   ─────────────────────────────────────────────────────────── */

html { font-size: 100%; }

@media (min-resolution: 1.2dppx) and (max-resolution: 1.35dppx) and (max-width: 1919px) {
  html { font-size: 90%; }
}

@media (min-resolution: 1.4dppx) and (max-resolution: 1.8dppx) and (max-width: 1599px) {
  html { font-size: 80%; }
}

/* ── The typeface ────────────────────────────────────────────
   Declared here, not in an app stylesheet, so that loading this
   one file is enough for a page to look like the product.
   ─────────────────────────────────────────────────────────── */

* { font-family: var(--su-font); }

body { background: var(--su-page); color: var(--su-text); }

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

.su-card {
  background: var(--su-surface);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow-sm);
}

/* ── Buttons ──────────────────────────────────────────────────
   There is one button. Wear the base plus at most one intent:

       <button class="su-btn su-btn--primary">Save changes</button>

   Bare `su-btn` IS the secondary — the ordinary button, the one
   next to the primary. Sizes are separate: `su-btn--sm`, `--lg`.

   THE INTENTS ARE THE WHOLE VOCABULARY. If an action does not fit
   one of them, that is a question about the action, not a reason
   for a sixth colour.

     --primary   the one thing this screen is for. One per view.
     (bare)      everything else the person may do here.
     --quiet     available, but not worth ink. Dismiss, skip, back.
     --danger    destructive. Red TEXT only, until the confirm step,
                 which uses --danger-solid. A screen of red buttons
                 warns nobody.
     --ai        the AI is about to act. Violet is reserved for this
                 and appears nowhere else, which is what lets it
                 mean something.
   ─────────────────────────────────────────────────────────── */

.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  font-family: var(--su-font);
  font-size: var(--su-fs-sm); font-weight: 500; line-height: 1.2;
  padding: 0.5rem 0.875rem; border-radius: var(--su-radius);
  border: 1px solid var(--su-border);
  background: var(--su-surface); color: var(--su-text-2);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--su-dur-fast) var(--su-ease),
              border-color var(--su-dur-fast) var(--su-ease),
              color var(--su-dur-fast) var(--su-ease),
              transform var(--su-dur-fast) var(--su-ease);
}
.su-btn:hover  { background: var(--su-inset); color: var(--su-text); }
.su-btn:active { transform: scale(.98); }

/* Neutral and high-contrast: a focus ring is a system affordance,
   not an action, so it does not borrow the AI's colour. */
.su-btn:focus-visible,
.su-chip:focus-visible {
  outline: 2px solid var(--su-text);
  outline-offset: 2px;
}

.su-btn--primary {
  background: var(--su-text); color: #fff; border-color: var(--su-text);
}
.su-btn--primary:hover { background: #27272a; color: #fff; }

.su-btn--quiet {
  background: transparent; border-color: transparent; color: var(--su-text-3);
}
.su-btn--quiet:hover { background: var(--su-inset); color: var(--su-text-2); }

.su-btn--danger { color: var(--su-danger); }
.su-btn--danger:hover {
  background: var(--su-danger-bg); border-color: var(--su-danger-border);
  color: var(--su-danger-strong);
}

/* Only on the step that actually destroys something. */
.su-btn--danger-solid {
  background: var(--su-danger); color: #fff; border-color: var(--su-danger);
}
.su-btn--danger-solid:hover { background: var(--su-danger-strong); color: #fff; }

/* AI-initiated actions only. */
.su-btn--ai {
  background: var(--su-ai); color: #fff; border-color: var(--su-ai);
}
.su-btn--ai:hover { background: var(--su-ai-strong); color: #fff; }

/* Sizes */
.su-btn--sm { font-size: var(--su-fs-xs); padding: 0.3125rem 0.625rem; gap: 0.3125rem; }
.su-btn--lg { font-size: var(--su-fs-md); padding: 0.6875rem 1.375rem; gap: 0.5rem; }

/* Square, for a button whose whole label is its icon.
   Such a button still needs an aria-label. */
.su-btn--icon { padding: 0; width: 2.125rem; height: 2.125rem; }
.su-btn--icon.su-btn--sm { padding: 0; width: 1.75rem; height: 1.75rem; }
.su-btn--icon.su-btn--lg { padding: 0; width: 2.75rem; height: 2.75rem; }

/* Unavailable, and saying so. Never used to mean "not allowed" —
   a person who may not do a thing is told why, in words. */
.su-btn:disabled,
.su-btn[aria-disabled="true"] {
  background: var(--su-inset); color: var(--su-text-3);
  border-color: var(--su-border);
  cursor: not-allowed; transform: none;
}

.su-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--su-font);
  font-size: var(--su-fs-sm); color: var(--su-text-2);
  padding: 0.3125rem 0.8125rem; border-radius: 62.4375rem;
  border: 1px solid var(--su-border-2); background: var(--su-surface);
  cursor: pointer; white-space: nowrap;
  transition: all var(--su-dur-fast) var(--su-ease);
}
.su-chip:hover {
  border-color: var(--su-ai-border); background: var(--su-ai-soft);
  color: var(--su-ai-strong);
}

/* A filter that is currently on. Reads as chosen, not as an action. */
.su-chip--on,
.su-chip[aria-pressed="true"] {
  background: var(--su-text); border-color: var(--su-text); color: #fff;
}
.su-chip--on:hover,
.su-chip[aria-pressed="true"]:hover {
  background: #27272a; border-color: #27272a; color: #fff;
}

/* ── Motion primitives ───────────────────────────────────── */

@keyframes su-enter-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.su-enter { animation: su-enter-up var(--su-dur-slow) var(--su-ease) both; }

@keyframes su-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.su-skeleton {
  border-radius: var(--su-radius);
  background: linear-gradient(90deg, var(--su-inset) 25%, #ececee 50%, var(--su-inset) 75%);
  background-size: 800px 100%;
  animation: su-shimmer 1.4s linear infinite;
}

/* Reduced motion: everything settles instantly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}