/* WizardUx CSS Custom Properties
 * 37signals-style design tokens
 *
 * These can be overridden by the host application by redefining
 * them before importing wizard_ux.css
 */

:root {
  /* ==========================================================================
     SPACING
     ========================================================================== */
  --wizard-spacing-inline: 1ch;
  --wizard-spacing-block: 1rem;
  --wizard-spacing-half: calc(var(--wizard-spacing-block) / 2);
  --wizard-spacing-double: calc(var(--wizard-spacing-block) * 2);

  /* ==========================================================================
     MODAL SIZING
     ========================================================================== */
  --wizard-modal-width: 640px;
  --wizard-modal-height: 90vh;
  --wizard-modal-max-height: 800px;
  --wizard-modal-border-radius: 1em;

  /* ==========================================================================
     COLORS (OKLCH - 37signals style)
     Host app should provide these via its design system, or use defaults
     ========================================================================== */

  /* Fallback values - these work standalone but host app should override */
  --wizard-color-bg: var(--color-bg, oklch(100% 0 0));
  --wizard-color-text: var(--color-text, oklch(26% 0.05 264));
  --wizard-color-text-subtle: var(--color-text-subtle, oklch(56% 0.014 260));
  --wizard-color-text-reversed: var(--color-text-reversed, oklch(100% 0 0));
  --wizard-color-border: var(--color-border, oklch(92% 0.003 254));
  --wizard-color-border-darker: var(--color-border-darker, oklch(85% 0.005 254));
  --wizard-color-shade: var(--color-shade, oklch(96% 0.002 252));
  --wizard-color-link: var(--color-link, oklch(57.02% 0.1895 260.46));
  --wizard-color-positive: var(--color-positive, oklch(55% 0.162 147));

  /* OKLCH components for alpha calculations */
  --wizard-lch-black: var(--lch-black, 0% 0 0);
  --wizard-lch-positive: var(--lch-positive, 55% 0.162 147);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --wizard-font-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
  --wizard-line-height: 1.375;
  --wizard-text-small: var(--text-small, 0.875rem);

  /* ==========================================================================
     SHADOWS (37signals multi-layer style)
     ========================================================================== */
  --wizard-shadow: var(--shadow, 0 0 0 1px oklch(0% 0 0 / 5%),
                                 0 0.2em 0.2em oklch(0% 0 0 / 5%),
                                 0 0.4em 0.4em oklch(0% 0 0 / 5%));
  --wizard-shadow-modal: 0 0 1em oklch(var(--wizard-lch-black) / 0.2);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  --wizard-transition-fast: 100ms ease;
  --wizard-transition-normal: 200ms ease;
  --wizard-transition-slow: 300ms ease;

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */
  --wizard-z-modal: 1000;
  --wizard-z-pill: 100;
}