/* ReportFlow — design tokens & base typography
   Aesthetic: blue-white workbench. Cool neutrals + a deeper, less
   plastic accent than the SaaS default. Spend the boldness in one
   place (the 01/02/03 stage markers); keep everything else quiet,
   hairline, and precise. */

:root {
  /* Color — cool blue-white neutrals.
     Slightly cooler and more deliberate than the SaaS default grey-blue:
     the bg leans towards #F5F7FB rather than the typical #F6F7F9, and
     lines pick up a hint of the accent so the whole shell feels tuned. */
  --rf-bg:        #F5F7FB;
  --rf-bg-elev:   #FFFFFF;
  --rf-bg-soft:   #EEF1F7;
  --rf-bg-hover:  #E4E9F2;
  --rf-line:      #DDE2EC;
  --rf-line-strong: #BFC7D6;

  /* Color — ink (cool, near-black with a faint blue cast) */
  --rf-text:      #161A24;
  --rf-text-muted:#566174;
  --rf-text-dim:  #8892A3;

  /* Color — accent: deeper, less plastic than the default #2d5cf6.
     Soft is a true cool tint, not lavender. */
  --rf-accent:        #1F4DBA;
  --rf-accent-strong: #173C92;
  --rf-accent-soft:   #E5ECFA;
  --rf-focus:         #4A78D8;

  /* Semantic — desaturated one notch so they don't shout */
  --rf-ok:        #2E8A5C;
  --rf-warn:      #B8780A;
  --rf-err:       #C03A3A;

  /* Type — a serif display face (used sparingly for brand & modal titles)
     paired with system sans for UI. Both fall back gracefully if the
     named faces are absent — no web fonts are loaded. */
  --rf-font-display:
    "Source Serif 4", "Source Serif Pro", "Songti SC",
    "STSong", "Noto Serif CJK SC", Georgia, serif;
  --rf-font:
    "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --rf-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — tighter than before; deliberate gaps */
  --rf-text-xs:   12px;
  --rf-text-sm:   13px;
  --rf-text-base: 14px;
  --rf-text-md:   16px;
  --rf-text-lg:   18px;
  --rf-text-xl:   22px;

  /* Radius — smaller, less plastic. 12px gone entirely. */
  --rf-radius-sm: 3px;
  --rf-radius:    6px;
  --rf-radius-lg: 8px;

  /* Shadows — used only on overlays and the preview surface.
     Cool-cast so they sit naturally on the blue-white bg. */
  --rf-shadow-sm: 0 1px 0 rgba(20, 28, 50, .04);
  --rf-shadow:    0 6px 22px rgba(20, 28, 50, .10);
  --rf-shadow-lg: 0 18px 48px rgba(20, 28, 50, .16);

  /* Layout — a touch more compact, more workshop than dashboard */
  --rf-topbar-h:    48px;
  --rf-statusbar-h: 24px;
  --rf-pane-head-h: 52px;
  --rf-pane-foot-h: 48px;
  --rf-gap:         10px;
  --rf-pad:         14px;
}

html { color-scheme: light; }
body {
  background: var(--rf-bg);
  color: var(--rf-text);
  font-family: var(--rf-font);
  font-size: var(--rf-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Headings: the display serif appears only where it earns its place
   (brand wordmark, modal titles). Everything else uses the body sans. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.005em; }

::selection { background: var(--rf-accent-soft); color: var(--rf-accent-strong); }

/* Subtle, paper-toned scrollbars */
.rf-scroll::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.rf-edit-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rf-scroll::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.rf-edit-scroll::-webkit-scrollbar-thumb {
  background: var(--rf-line-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rf-scroll::-webkit-scrollbar-thumb:hover,
.rf-edit-scroll::-webkit-scrollbar-thumb:hover {
  background: #A5AEC1; background-clip: padding-box;
}

/* Visible keyboard focus everywhere — quality floor, not announced */
:focus-visible {
  outline: 2px solid var(--rf-focus);
  outline-offset: 2px;
}
.rf-btn:focus-visible,
.rf-input:focus-visible,
.rf-select:focus-visible,
.rf-textarea:focus-visible {
  outline: none; /* component-level focus rings handle these */
}

/* Reduced motion respected */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}