/* Gisty — design tokens (source of truth for color/type/radii) */
:root{
  /* surfaces */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F4F2EC;
  --surface-sunken: #F0EEE7;

  /* ink */
  --ink-1: #14130F;
  --ink-2: #4A4842;
  --ink-3: #6B6860;
  --ink-4: #9C9890;

  /* border */
  --border: #EAE8E0;
  --border-strong: #DAD6C8;
  --border-ink: rgba(20,19,15,.08);

  /* accent — warm amber */
  --amber: #E08A2B;
  --amber-ink: #A45E13;
  --amber-soft: #FBEED9;
  --amber-softer: #FDF6E9;

  /* semantic */
  --success: #2E8F5F;
  --success-soft: #E4F2EA;
  --warn: #B7791F;
  --warn-soft: #FAEFD6;
  --danger: #B4321F;
  --danger-soft: #F7E1DB;
  --info: #2E5FA8;
  --info-soft: #E3ECF7;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* type */
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale (display → body) */
  --h1: 56px;  /* page hero */
  --h2: 40px;  /* section hero / screen title */
  --h3: 28px;  /* section sub-heading */
  --h4: 22px;  /* card title */
  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --ls-tight: -.02em;
  --ls-snug:  -.01em;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ color-scheme: light; }
body{
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

/* iOS tap latency + grey flash */
a, button, [role="button"], input[type="submit"], input[type="button"], summary, label{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring (global) */
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

/* Skip-to-main link — visible only on keyboard focus. */
.skip-link{
  position: absolute; left: 8px; top: -40px;
  background: var(--ink-1); color: #fff;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  z-index: 1000;
  transition: top .15s ease;
}
.skip-link:focus, .skip-link:focus-visible{ top: 8px; }

/* Utilities */
.num{ font-variant-numeric: tabular-nums; }

/* Scrollbars (opt-in via class) */
.scroll-y{ overflow-y: auto; }
.scroll-y::-webkit-scrollbar{ width: 10px; }
.scroll-y::-webkit-scrollbar-thumb{ background: #D8D4C6; border-radius: 10px; }

/* Respect the system setting — kills infinite spinners, step pulses, modal fades. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Two animations with fill-mode:both leave the element in the keyframe's
     0% state when the duration collapses — which renders them invisible or
     mid-shimmer. Force them back to a sensible steady state. */
  .su-art-done svg{ transform: none !important; opacity: 1 !important; }
  .thumb-gen::before{ display: none !important; }
}