/**
 * Seify public site — design tokens (SSoT for seifytema).
 * Plugin storefront CSS may load after this file; overrides for body.seify-theme
 * live in seifyplugin/assets/css/seify-theme-compat.css.
 *
 * @package Seify_Theme
 */

:root {
  /* —— Brand palette (do not use raw hex in components) —— */
  --sf-color-action: #ff6b35;
  --sf-color-action-hover: #e8541f;
  --sf-color-action-on: #fefefe;

  --sf-color-trust: #416b28;
  --sf-color-trust-deep: #3f6428;
  --sf-color-trust-mid: #789b60;
  --sf-color-trust-soft: #d7e1d0;

  --sf-color-surface: #fbf7f2;
  --sf-color-surface-muted: #f3ede4;
  --sf-color-surface-elevated: #fefefe;

  --sf-color-ink: #1a1613;
  --sf-color-ink-soft: #4a433c;
  --sf-color-ink-muted: #6b635a;

  --sf-color-contrast: #12100e;

  --sf-color-border: color-mix(in srgb, var(--sf-color-ink) 12%, transparent);
  --sf-color-border-strong: color-mix(in srgb, var(--sf-color-ink) 22%, transparent);

  --sf-color-success: #2f6b2a;
  --sf-color-error: #b42318;
  --sf-color-error-bg: color-mix(in srgb, var(--sf-color-error) 12%, var(--sf-color-surface));
  --sf-color-warning: var(--sf-color-action);

  --sf-color-focus: var(--sf-color-action);

  /* —— Legacy aliases (keep existing templates/CSS working) —— */
  --orange: var(--sf-color-action);
  --orange-deep: var(--sf-color-action-hover);
  --brand: var(--sf-color-action);
  --brand-dark: var(--sf-color-action-hover);
  --green: var(--sf-color-trust);
  --green-deep: var(--sf-color-trust-deep);
  --green-mid: var(--sf-color-trust-mid);
  --green-soft: var(--sf-color-trust-soft);
  --ink: var(--sf-color-ink);
  --ink-soft: var(--sf-color-ink-soft);
  --muted: var(--sf-color-ink-muted);
  --paper: var(--sf-color-surface);
  --paper-2: var(--sf-color-surface-muted);
  --white: var(--sf-color-surface-elevated);
  --line: var(--sf-color-border);
  --canvas-dark: var(--sf-color-contrast);
  --danger: var(--sf-color-error);
  --ok: var(--sf-color-success);
  --tone: var(--sf-color-trust);

  /* —— Typography —— */
  --font-display: "Syne", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --sf-text-xs: 0.75rem;
  --sf-text-sm: 0.875rem;
  --sf-text-base: 1rem;
  --sf-text-md: 1.05rem;
  --sf-text-lg: 1.1rem;
  --sf-text-xl: clamp(1.35rem, 3vw, 1.75rem);
  --sf-text-display-sm: clamp(1.7rem, 3vw, 2.35rem);
  --sf-text-display: clamp(2.35rem, 5vw, 3.5rem);

  --sf-font-weight-medium: 600;
  --sf-font-weight-bold: 700;
  --sf-font-weight-heavy: 800;

  --sf-line-height-tight: 1.15;
  --sf-line-height-body: 1.5;

  /* —— Radius —— */
  --sf-radius-sm: 0.25rem;
  --sf-radius-md: 0.375rem;
  --sf-radius-lg: 0.5rem;
  --sf-radius-xl: 0.75rem;
  --sf-radius-2xl: 1rem;
  --sf-radius-pill: 999px;
  --radius-3xl: 1.5rem;
  --radius-lg: var(--sf-radius-lg);
  --radius-xl: var(--sf-radius-xl);

  /* —— Spacing —— */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-5: 1.25rem;
  --sf-space-6: 1.5rem;
  --sf-space-8: 2rem;
  --sf-space-10: 2.5rem;
  --sf-space-section: 4.5rem;
  --sf-space-section-tight: 3rem;

  /* —— Elevation —— */
  --sf-shadow-sm: 0 1px 2px color-mix(in srgb, var(--sf-color-ink) 6%, transparent);
  --sf-shadow-md: 0 6px 20px color-mix(in srgb, var(--sf-color-ink) 6%, transparent);
  --sf-shadow-nav: 0 16px 40px color-mix(in srgb, var(--sf-color-ink) 12%, transparent);

  /* —— Motion —— */
  --sf-transition-fast: 0.15s ease;

  /* —— Layout —— */
  --seify-content-max-width: 1320px;
  --sf-layout-narrow: 1100px;

  /* —— Plugin bridge (--seify-* consumed by Woo, locator, components) —— */
  --seify-primary: var(--sf-color-action);
  --seify-primary-dark: var(--sf-color-action-hover);
  --seify-primary-hover: var(--sf-color-action-hover);
  --seify-primary-bg: color-mix(in srgb, var(--sf-color-action) 14%, transparent);
  --seify-on-primary: var(--sf-color-action-on);
  --seify-color-primary: var(--sf-color-action);
  --seify-checkout-brand: var(--sf-color-action);
  --seify-accent: var(--sf-color-action);
  --seify-accent-on-dark: #ff9b5e;
  --seify-warning: var(--sf-color-warning);
  --seify-success: var(--sf-color-trust);
  --seify-error: var(--sf-color-error);
  --seify-text-muted: var(--sf-color-ink-muted);
  --seify-white: var(--sf-color-surface-elevated);
  --seify-surface: var(--sf-color-surface);
  --seify-surface-muted: var(--sf-color-surface-muted);
  --seify-bg-alt: var(--sf-color-surface-muted);
  --seify-border-color: var(--sf-color-border);
  --seify-text: var(--sf-color-ink);
  --seify-heading-color: var(--sf-color-ink);
  --seify-card-bg: var(--sf-color-surface-elevated);
  --seify-font-family-base: var(--font-body);
  --seify-font-family: var(--font-body);
  --seify-bg-slate-50: var(--sf-color-surface);
  --seify-link-color: var(--sf-color-action);
  --seify-link-hover-color: var(--sf-color-action-hover);
  --seify-radius-sm: var(--sf-radius-sm);
  --seify-radius-md: var(--sf-radius-md);
  --seify-radius-lg: var(--sf-radius-lg);
  --seify-slate-50: var(--sf-color-surface);
  --seify-slate-100: var(--sf-color-surface-muted);
  --seify-slate-200: var(--sf-color-border);
  --seify-slate-300: color-mix(in srgb, var(--sf-color-ink) 28%, var(--sf-color-surface));
  --seify-slate-500: var(--sf-color-ink-muted);
  --seify-slate-600: var(--sf-color-ink-soft);
  --seify-text-primary: var(--sf-color-ink);
  --seify-text-secondary: var(--sf-color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sf-transition-fast: 0.01ms;
  }
}