rxform 0.1.3

@import "tailwindcss";

@source "../docs/en";
@source "../docs/pt";
@source "../docs/fr";
@source "../docs/es";

@theme {
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --color-ink: #1b2a41;
  --color-inksoft: #46587a;
  --color-paper: #faf6ee;
  --color-card: #fffdf8;
  --color-line: #e3dbc9;
  --color-amber: #a86f1f;
  --color-blue: #3b6ea5;
  --color-green: #2f7d49;
  --color-purple: #7a4bd6;
  --color-red: #b3403a;
  --color-term: #131a26;
  --color-termtext: #d5e2f2;
}

/* ---------- surface variables: light is the canonical datasheet ---------- */
@layer base {
  :root {
    --bg: var(--color-paper);
    --surface: var(--color-card);
    --text: var(--color-ink);
    --muted: var(--color-inksoft);
    --rule: var(--color-line);
    --grid-line: rgba(59, 110, 165, 0.09);
    --accent: var(--color-amber);
    --cellhead: #f1ead9;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #10141d;
      --surface: #161c28;
      --text: #e6ecf5;
      --muted: #9fadc4;
      --rule: #2a3347;
      --grid-line: rgba(110, 163, 221, 0.08);
      --accent: #d3a04c;
      --cellhead: #1d2534;
    }
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  ::selection {
    background: var(--accent);
    color: var(--bg);
  }
}

/* ---------- worksheet-grid backdrop ---------- */
@utility sheet-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 32px;
}

@utility rule-y {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---------- entrance choreography ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@utility rise-* {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(--value(integer) * 90ms);
}

@keyframes caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@utility caret-blink {
  animation: caret 1.1s steps(1) infinite;
}

/* scroll reveals (progressive enhancement, JS adds .in) */
@utility reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  [class*="rise-"] { animation: none; }
}

/* ---------- documentation guide components ---------- */
@layer components {
  /* spreadsheet-style example tables */
  .xls {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .xls th {
    background: var(--cellhead);
    color: var(--muted);
    font-weight: 500;
    text-align: left;
  }
  .xls th, .xls td {
    border: 1px solid var(--rule);
    padding: 6px 12px;
    vertical-align: top;
  }
  .xls .rn { /* row-number gutter cell */
    width: 2rem;
    text-align: center;
    color: var(--muted);
    background: var(--cellhead);
    padding: 6px 4px;
  }
  .xls-card {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
    margin: 1rem 0 1.75rem;
  }
  .xls-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--rule);
    background: var(--cellhead);
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
  }

  /* long-form prose */
  .doc { color: var(--text); line-height: 1.75; }
  .doc h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 3.5rem 0 1rem;
    scroll-margin-top: 5rem;
  }
  .doc h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin: 2.25rem 0 0.75rem;
    scroll-margin-top: 5rem;
  }
  .doc p, .doc ul, .doc ol { margin: 0.85rem 0; color: var(--text); }
  .doc ul { padding-left: 1.4rem; list-style: disc; }
  .doc ol { padding-left: 1.4rem; list-style: decimal; }
  .doc li { margin: 0.35rem 0; }
  .doc a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
  .doc a:hover { text-decoration-color: var(--accent); }
  .doc code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--cellhead);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.08em 0.35em;
  }
  .doc pre {
    background: var(--color-term);
    color: var(--color-termtext);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    margin: 1rem 0 1.75rem;
  }
  .doc pre code { background: none; border: none; padding: 0; font-size: inherit; }
  .doc .lead { font-size: 1.1rem; color: var(--muted); }
  .doc .callout {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--surface);
    padding: 0.85rem 1.1rem;
    margin: 1.25rem 0;
  }
  .doc .kicker {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* table of contents */
  .toc a {
    display: block;
    padding: 0.28rem 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
  }
  .toc a:hover { color: var(--accent); }
  .toc .toc-h3 { padding-left: 1rem; }
}