/* ─────────────────────────────────────────────────────────────────────────
   Resolut — Design tokens
   The single CSS source of truth for the website-builder / renderer design
   system. Tokens are declared per-theme, density knobs are global, type
   families come from the typography preset. Ported from Design/resolut.css.

   Consumers set [data-theme] / [data-type] / [data-density] on a frame
   element; every primitive resolves its colours/spacing from these vars.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* density (overridden by [data-density]) */
  --r-d-2: 2px;  --r-d-4: 4px;  --r-d-6: 6px;  --r-d-8: 8px;
  --r-d-12: 12px; --r-d-16: 16px; --r-d-20: 20px; --r-d-24: 24px;
  --r-d-32: 32px; --r-d-40: 40px; --r-d-48: 48px; --r-d-64: 64px; --r-d-96: 96px;

  /* type — overridden by typography preset */
  --r-f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --r-f-text:    "Geist", "Söhne", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r-f-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale */
  --r-fs-1: 11px;  --r-fs-2: 12px; --r-fs-3: 13px; --r-fs-4: 14px;
  --r-fs-5: 16px;  --r-fs-6: 18px; --r-fs-7: 20px; --r-fs-8: 24px;
  --r-fs-9: 28px;  --r-fs-10: 36px; --r-fs-11: 48px; --r-fs-12: 64px; --r-fs-13: 96px;
  --r-lh-tight: 1.05; --r-lh-snug: 1.2; --r-lh-normal: 1.45; --r-lh-relaxed: 1.6;
  --r-ls-tight: -0.02em; --r-ls-tighter: -0.03em; --r-ls-wide: 0.04em; --r-ls-widest: 0.12em;

  /* radius */
  --r-r-0: 0;  --r-r-2: 2px; --r-r-4: 4px; --r-r-6: 6px; --r-r-8: 8px;
  --r-r-12: 12px; --r-r-16: 16px; --r-r-24: 24px; --r-r-pill: 999px;

  /* elevation */
  --r-e-0: none;
  --r-e-1: 0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  --r-e-2: 0 2px 4px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --r-e-3: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --r-e-4: 0 24px 64px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --r-e-inset: inset 0 0 0 0.5px rgba(0,0,0,.08);

  /* motion */
  --r-m-fast: 120ms;  --r-m-base: 180ms; --r-m-slow: 280ms;
  --r-m-ease: cubic-bezier(.32,.72,.24,1);
  --r-m-ease-out: cubic-bezier(.16,1,.3,1);

  /* defaults (overridden by [data-theme]) */
  --r-bg:          #f6f4ee;
  --r-bg-elev:    #fbfaf6;
  --r-surface:     #ffffff;
  --r-fg:          #1a1a1a;
  --r-fg-muted:    rgba(26,26,26,.62);
  --r-fg-soft:     rgba(26,26,26,.45);
  --r-fg-faint:    rgba(26,26,26,.22);
  --r-line:        rgba(26,26,26,.08);
  --r-line-strong: rgba(26,26,26,.16);
  --r-accent:      #1a1a1a;
  --r-accent-fg:   #ffffff;
  --r-tint:        rgba(26,26,26,.04);
  --r-ok:          #1f6f43;
  --r-warn:        #a26514;
  --r-danger:      #a8341c;
  --r-info:        #1f4a7a;
}

/* ── THEMES ────────────────────────────────────────────────────────────── */

/* Aria — warm bone / charcoal, the refined house default. Jony-Ive-at-Luce. */
[data-theme="aria"] {
  --r-bg:          #f4f1e9;
  --r-bg-elev:    #faf8f1;
  --r-surface:     #ffffff;
  --r-fg:          #14130f;
  --r-fg-muted:    rgba(20,19,15,.6);
  --r-fg-soft:     rgba(20,19,15,.42);
  --r-fg-faint:    rgba(20,19,15,.2);
  --r-line:        rgba(20,19,15,.08);
  --r-line-strong: rgba(20,19,15,.16);
  --r-accent:      #14130f;
  --r-accent-fg:   #faf8f1;
  --r-tint:        rgba(20,19,15,.035);
}

/* Mono — pure white, all-sans, mechanical grid. */
[data-theme="mono"] {
  --r-bg:          #ffffff;
  --r-bg-elev:    #fbfbfb;
  --r-surface:     #ffffff;
  --r-fg:          #0a0a0a;
  --r-fg-muted:    rgba(10,10,10,.58);
  --r-fg-soft:     rgba(10,10,10,.4);
  --r-fg-faint:    rgba(10,10,10,.18);
  --r-line:        rgba(10,10,10,.07);
  --r-line-strong: rgba(10,10,10,.14);
  --r-accent:      #0a0a0a;
  --r-accent-fg:   #ffffff;
  --r-tint:        rgba(10,10,10,.035);
}

/* Onyx — deep black canvas, ivory text. */
[data-theme="onyx"] {
  --r-bg:          #0c0c0d;
  --r-bg-elev:    #141416;
  --r-surface:     #1a1a1d;
  --r-fg:          #f3efe6;
  --r-fg-muted:    rgba(243,239,230,.62);
  --r-fg-soft:     rgba(243,239,230,.42);
  --r-fg-faint:    rgba(243,239,230,.22);
  --r-line:        rgba(243,239,230,.08);
  --r-line-strong: rgba(243,239,230,.16);
  --r-accent:      #f3efe6;
  --r-accent-fg:   #0c0c0d;
  --r-tint:        rgba(243,239,230,.05);
  --r-e-1: 0 1px 0 rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  --r-e-2: 0 2px 4px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  --r-e-3: 0 8px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --r-e-4: 0 24px 64px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
}

/* ── TYPOGRAPHY PRESETS ────────────────────────────────────────────────── */

[data-type="editorial"] {
  --r-f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --r-f-text:    "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --r-f-mono:    "Geist Mono", ui-monospace, monospace;
  --r-ls-display: -0.018em;
}
[data-type="geometric"] {
  --r-f-display: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --r-f-text:    "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --r-f-mono:    "Geist Mono", ui-monospace, monospace;
  --r-ls-display: -0.035em;
}
[data-type="humanist"] {
  --r-f-display: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --r-f-text:    "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --r-f-mono:    "JetBrains Mono", ui-monospace, monospace;
  --r-ls-display: -0.028em;
}

/* ── DENSITY ───────────────────────────────────────────────────────────── */

[data-density="compact"] {
  --r-d-2: 2px;  --r-d-4: 3px;  --r-d-6: 4px;  --r-d-8: 6px;
  --r-d-12: 8px; --r-d-16: 12px; --r-d-20: 14px; --r-d-24: 16px;
  --r-d-32: 22px; --r-d-40: 28px; --r-d-48: 34px; --r-d-64: 44px; --r-d-96: 64px;
}
[data-density="comfy"] {
  --r-d-2: 2px;  --r-d-4: 5px;  --r-d-6: 8px;  --r-d-8: 10px;
  --r-d-12: 14px; --r-d-16: 20px; --r-d-20: 24px; --r-d-24: 30px;
  --r-d-32: 40px; --r-d-40: 52px; --r-d-48: 62px; --r-d-64: 84px; --r-d-96: 120px;
}

/* ── PAGE FRAME ────────────────────────────────────────────────────────── */

.r-frame {
  background: var(--r-bg);
  color: var(--r-fg);
  font-family: var(--r-f-text);
  font-size: var(--r-fs-5);
  line-height: var(--r-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background-color var(--r-m-base) var(--r-m-ease),
              color var(--r-m-base) var(--r-m-ease);
}
.r-frame *,
.r-frame *::before,
.r-frame *::after { box-sizing: border-box; }
.r-frame *::selection { background: var(--r-fg); color: var(--r-bg); }

/* ── UTILITY ───────────────────────────────────────────────────────────── */

.r-mono { font-family: var(--r-f-mono); }
.r-display { font-family: var(--r-f-display); font-weight: 400; letter-spacing: var(--r-ls-display, -0.02em); }
.r-eyebrow {
  font-family: var(--r-f-mono);
  font-size: 10.5px;
  letter-spacing: var(--r-ls-widest);
  text-transform: uppercase;
  color: var(--r-fg-soft);
}
.r-num { font-variant-numeric: tabular-nums; }
.r-card-edge { box-shadow: var(--r-e-inset); }

/* Hairline divider used throughout the showcase grid */
.r-hairline { border: 0; border-top: 0.5px solid var(--r-line); margin: 0; }

/* Input field — resting hairline + focus ring via :focus-within, so the ring
   works without JS. An error field sets its own inline box-shadow, which wins. */
.r-input-field {
  box-shadow: inset 0 0 0 0.5px var(--r-line-strong);
  transition: box-shadow var(--r-m-fast) var(--r-m-ease);
}
.r-input-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--r-fg), 0 0 0 3px var(--r-tint);
}

/* Spinner keyframe — consumed by <Spinner /> */
@keyframes r-spin { to { transform: rotate(360deg); } }