/* Roomfold's executable UI foundation. DESIGN.md explains roles and exceptions.
   Public pages load this directly; Vite bundles it for the editor and sharing.
   Channel tuples keep translucent treatments tied to the same palette values. */
:root {
  --rf-rgb-ink: 16, 36, 56;
  --rf-rgb-blue: 22, 50, 78;
  --rf-rgb-panel-deep: 14, 37, 57;
  --rf-rgb-sheet-raised: 29, 61, 92;
  --rf-rgb-chalk: 217, 232, 242;
  --rf-rgb-gold: 255, 214, 107;
  --rf-rgb-pencil: 255, 138, 112;
  --rf-color-ink: rgb(var(--rf-rgb-ink));
  --rf-color-blue: rgb(var(--rf-rgb-blue));
  --rf-color-panel-deep: rgb(var(--rf-rgb-panel-deep));
  --rf-color-chalk: rgb(var(--rf-rgb-chalk));
  --rf-color-gold: rgb(var(--rf-rgb-gold));
  --rf-color-pencil: rgb(var(--rf-rgb-pencil));
  --rf-color-sheet-raised: rgb(var(--rf-rgb-sheet-raised));
  --rf-color-panel: #14304a;
  --rf-color-chalk-dim: #b8cfdf;
  --rf-color-chalk-faint: #a7c1d3;
  --rf-color-outline: #7e9eb7;
  --rf-color-rule: #34516a;
  --rf-color-rule-strong: #416480;
  --rf-color-outline-muted: #718da3;
  --rf-color-outline-soft: #526d82;
  --rf-color-text-heading: #e9f1f7;
  --rf-color-public-note: #183852;
  --rf-color-backdrop: #06121ce6;
  --rf-color-warning: #ffb49e;
  --rf-color-warning-hover: #ffa48f;
  --rf-color-gold-hover: #ffe399;
  --rf-color-gold-soft: #ffda83;
  --rf-color-hairline: rgba(var(--rf-rgb-chalk), .18);

  /* Default dark UI roles. Light notices rebind their foreground roles locally. */
  --rf-surface: var(--rf-color-ink);
  --rf-surface-panel: var(--rf-color-panel);
  --rf-surface-input: var(--rf-color-panel-deep);
  --rf-surface-raised: var(--rf-color-sheet-raised);
  --rf-text: var(--rf-color-chalk);
  --rf-text-muted: var(--rf-color-chalk-dim);
  --rf-text-subtle: var(--rf-color-chalk-faint);
  --rf-text-heading: var(--rf-color-text-heading);
  --rf-border: var(--rf-color-rule);
  --rf-border-strong: var(--rf-color-rule-strong);
  --rf-border-control: var(--rf-color-outline);
  --rf-accent: var(--rf-color-gold);
  --rf-accent-hover: var(--rf-color-gold-hover);
  --rf-accent-soft: var(--rf-color-gold-soft);
  --rf-on-accent: var(--rf-color-ink);
  --rf-warning: var(--rf-color-warning);
  --rf-warning-hover: var(--rf-color-warning-hover);
  --rf-focus: var(--rf-color-gold);

  --rf-font-body: 'Avenir Next', 'Segoe UI', sans-serif;
  --rf-font-display: 'Darker Grotesque', 'Avenir Next', sans-serif;
  --rf-font-heading: 'Darker Grotesque', sans-serif;
  --rf-font-mono: 'Sometype Mono', monospace;
  --rf-font-annotation: 'Architects Daughter', cursive;
  --rf-type-caption: 12px;
  --rf-type-label: 14px;
  --rf-type-body: 16px;
  --rf-leading-body: 1.6;
  --rf-leading-label: 1.5;
  --rf-leading-control: 1.3;

  /* Recurring UI spacing. Page composition and one-off geometry stay local. */
  --rf-space-1: 2px;
  --rf-space-2: 4px;
  --rf-space-3: 6px;
  --rf-space-4: 8px;
  --rf-space-5: 10px;
  --rf-space-6: 12px;
  --rf-space-7: 14px;
  --rf-space-8: 16px;
  --rf-space-9: 20px;
  --rf-space-10: 24px;
  --rf-space-11: 32px;
  --rf-space-section: var(--rf-space-8);
  --rf-space-toolbar: var(--rf-space-4);

  --rf-radius-control: 3px;
  --rf-radius-compact: 4px;
  --rf-radius-mini-panel: var(--rf-radius-compact);
  --rf-radius-menu: 6px;
  --rf-radius-container: 7px;
  --rf-radius-catalogue: 8px;
  --rf-radius-sheet: 12px;
  --rf-radius-drawer: 20px;
  --rf-radius-pill: 999px;
  --rf-radius-circle: 50%;
  --rf-shadow-overlay: 0 12px 32px #06121c80;
  --rf-shadow-sheet: 0 -12px 36px #06121c66;
  --rf-shadow-dialog: 0 20px 90px #06121cc0;
  --rf-control-height: 40px;
  --rf-field-height: 42px;
  --rf-control-touch: 44px;
  --rf-mini-panel-width: 288px;
  --rf-duration-control: 120ms;
  --rf-duration-sheet: 240ms;
  --rf-ease-sheet: cubic-bezier(.2, .8, .2, 1);
}