/**
 * Sellbricks Intake – Design tokens (shared frontend + admin)
 *
 * Primitive values live here. Appearance overrides inject via wp_add_inline_style
 * on the frontend handle (Settings → Appearance).
 */

:root {
  /* ── Color primitives ───────────────────────────────────── */
  --sbi-color-primary: #e63946;
  --sbi-color-primary-dark: #c1121f;
  --sbi-color-secondary: #457b9d;
  --sbi-color-secondary-dark: #35607a;
  --sbi-color-text: #1d3557;
  --sbi-color-text-muted: #6b7280;
  --sbi-color-bg: #ffffff;
  --sbi-color-bg-alt: #f8f9fa;
  --sbi-color-border: #d1d5db;
  --sbi-color-error: #dc2626;
  --sbi-color-success: #16a34a;
  --sbi-color-button-text: #ffffff;
  --sbi-color-attention: #d63638;

  /* ── WordPress admin chrome (admin.css only) ──────────────── */
  --sbi-wp-border: #c3c4c7;
  --sbi-wp-surface: #f6f7f7;
  --sbi-wp-text: #1d2327;
  --sbi-wp-text-muted: #646970;
  --sbi-wp-icon: #50575e;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sbi-spacing-xs: 0.25rem;
  --sbi-spacing-sm: 0.5rem;
  --sbi-spacing-md: 1rem;
  --sbi-spacing-lg: 1.5rem;
  --sbi-spacing-xl: 2rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --sbi-radius: 6px;
  --sbi-radius-pill: 999px;
  --sbi-button-radius: var(--sbi-radius);
  --sbi-layout-block-gap: var(--wp--style--block-gap, var(--sbi-spacing-lg));
  --sbi-layout-content-width: var(--wp--style--global--content-size, 100%);

  /* ── Typography ──────────────────────────────────────────── */
  /* Font families, text colors, and line-heights outside forms come from the active theme. */
  --sbi-font-size-xs: 0.8rem;
  --sbi-font-size-sm: 0.875rem;
  --sbi-font-size-base: 1rem;
  --sbi-font-size-lg: 1.5rem;
  --sbi-line-height-body: 1.65;
  --sbi-line-height-ui: 1.45;
  --sbi-line-height-tight: 1.25;

  /* ── Motion ──────────────────────────────────────────────── */
  --sbi-transition-base: 0.15s ease;

  /* ── Form / control sizing ───────────────────────────────── */
  --sbi-input-padding-y: 0.5rem;
  --sbi-input-padding-x: 0.75rem;
  /* Shared min-height keeps inputs/selects aligned when themes style them differently. */
  --sbi-input-min-height: calc(var(--sbi-input-padding-y) * 2 + 1em + 2px);
  /* Match form controls; slightly more padding so labels do not feel cramped. */
  --sbi-button-padding-y: calc(var(--sbi-input-padding-y) + 0.125rem);
  --sbi-button-padding-x: calc(var(--sbi-input-padding-x) + 0.125rem);
  --sbi-button-min-height: calc(var(--sbi-button-padding-y) * 2 + 1em + var(--sbi-button-border-width) * 2);
  --sbi-button-border-width: 2px;
  --sbi-actions-gap: calc(var(--sbi-spacing-sm) + 0.125rem);
  --sbi-offer-button-min-height: 3rem;

  /* ── Weight slider ───────────────────────────────────────── */
  --sbi-weight-track: 0.5rem;
  --sbi-weight-thumb: 1.75rem;
  --sbi-weight-thumb-offset: -0.625rem;

  /* ── Semantic surfaces (derived) ─────────────────────────── */
  --sbi-surface-panel-bg: var(--sbi-color-bg-alt);
  --sbi-surface-panel-border: var(--sbi-color-border);

  --sbi-surface-success-bg: color-mix(in srgb, var(--sbi-color-success) 12%, var(--sbi-color-bg));
  --sbi-surface-success-border: color-mix(in srgb, var(--sbi-color-success) 45%, var(--sbi-color-border));
  --sbi-surface-success-text: color-mix(in srgb, var(--sbi-color-success) 75%, var(--sbi-color-text));
  --sbi-surface-success-text-strong: color-mix(in srgb, var(--sbi-color-success) 85%, var(--sbi-color-text));
  --sbi-surface-success-icon-border: color-mix(in srgb, var(--sbi-color-success) 55%, var(--sbi-color-border));
  --sbi-surface-success-header-border: color-mix(in srgb, var(--sbi-color-success) 35%, var(--sbi-color-border));

  --sbi-surface-secondary-bg: color-mix(in srgb, var(--sbi-color-secondary) 8%, var(--sbi-color-bg));
  --sbi-surface-secondary-border: color-mix(in srgb, var(--sbi-color-secondary) 35%, var(--sbi-color-border));
  --sbi-surface-secondary-bg-soft: color-mix(in srgb, var(--sbi-color-secondary) 10%, var(--sbi-color-bg));
  --sbi-surface-secondary-bg-hover: color-mix(in srgb, var(--sbi-color-secondary) 18%, var(--sbi-color-bg));
  --sbi-surface-secondary-icon-border: color-mix(in srgb, var(--sbi-color-secondary) 55%, var(--sbi-color-border));
  --sbi-surface-secondary-header-border: color-mix(in srgb, var(--sbi-color-secondary) 35%, var(--sbi-color-border));
  --sbi-surface-secondary-hover-border: color-mix(in srgb, var(--sbi-color-secondary) 55%, var(--sbi-color-border));

  --sbi-surface-error-bg: color-mix(in srgb, var(--sbi-color-error) 10%, var(--sbi-color-bg));
  --sbi-surface-error-border: color-mix(in srgb, var(--sbi-color-error) 45%, var(--sbi-color-border));

  --sbi-surface-muted-hover-bg: color-mix(in srgb, var(--sbi-color-border) 40%, var(--sbi-color-bg-alt));
  --sbi-surface-muted-hover-border: color-mix(in srgb, var(--sbi-color-text-muted) 35%, var(--sbi-color-border));
  --sbi-surface-track-inactive: color-mix(in srgb, var(--sbi-color-border) 70%, var(--sbi-color-bg));

  /* ── Focus & elevation ───────────────────────────────────── */
  --sbi-focus-border: var(--sbi-color-secondary);
  --sbi-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sbi-color-secondary) 25%, transparent);
  --sbi-shadow-thumb: 0 1px 4px color-mix(in srgb, var(--sbi-color-text) 18%, transparent);
}

/* Admin uses a slightly tighter radius to match WP forms. */
.sbi-admin-settings,
.sbi-admin-panel,
.sbi-admin-help {
  --sbi-radius: 4px;
}