/*
 * SpiceFactory Trust Portal — Design Tokens
 *
 * Canonical token surface. Imported by public/index.html, public/c/index.html,
 * public/admin/index.html, and policies/policy-style.css. Each surface had
 * its own `:root` block prior to this consolidation; the per-surface blocks
 * remain as overrides for backwards compatibility while modules migrate.
 *
 * Naming convention: --sf-{category}-{role}-{variant?}
 *   color   surface, text, border, brand, feedback
 *   space   0.5..10 (in 4px steps where reasonable)
 *   text    xs, sm, base, md, lg, xl, 2xl, 3xl
 *   radius  sm, md, lg, full
 *   shadow  sm, md, lg
 */

:root {
  /* ─── Brand ─────────────────────────────────────────── */
  --sf-color-brand-red: #EF3628;
  --sf-color-brand-red-dark: #D42E22;
  --sf-color-brand-black: #1A1A1A;
  --sf-color-brand-blue: #7183FF;        /* "cobalt" in legacy docs */
  --sf-color-brand-mustard: #C7B953;     /* reserved; not in active use */

  /* ─── Neutrals ──────────────────────────────────────── */
  --sf-color-white: #FFFFFF;
  --sf-color-gray-50: #F5F5F5;
  --sf-color-gray-100: #E5E7EB;
  --sf-color-gray-300: #9CA3AF;
  --sf-color-gray-500: #6B7280;
  --sf-color-gray-700: #545250;
  --sf-color-gray-900: #1A1A1A;

  /* ─── Feedback (accessible: 4.5:1+ on white) ────────── */
  --sf-color-success: #10B981;
  --sf-color-success-bg: #D1FAE5;
  --sf-color-success-fg: #065F46;

  --sf-color-warning: #B45309;            /* darkened for AA contrast */
  --sf-color-warning-bg: #FEF3C7;
  --sf-color-warning-fg: #92400E;

  --sf-color-danger: #B91C1C;             /* alert red (not brand red) */
  --sf-color-danger-bg: #FEE2E2;
  --sf-color-danger-fg: #991B1B;

  --sf-color-info-bg: #DBEAFE;
  --sf-color-info-fg: #1D4ED8;

  /* ─── Semantic aliases ──────────────────────────────── */
  --sf-surface-default: var(--sf-color-white);
  --sf-surface-muted: var(--sf-color-gray-50);
  --sf-surface-inverse: var(--sf-color-brand-black);

  --sf-text-default: #000000;
  --sf-text-secondary: var(--sf-color-gray-700);
  --sf-text-muted: var(--sf-color-gray-500);
  --sf-text-inverse: var(--sf-color-white);

  --sf-border-default: var(--sf-color-gray-100);
  --sf-border-strong: var(--sf-color-gray-300);

  --sf-link: var(--sf-color-brand-blue);
  --sf-accent: var(--sf-color-brand-red);
  --sf-accent-hover: var(--sf-color-brand-red-dark);

  /* ─── Spacing scale ─────────────────────────────────── */
  --sf-space-0: 0;
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 20px;
  --sf-space-6: 24px;
  --sf-space-8: 32px;
  --sf-space-10: 40px;
  --sf-space-12: 48px;
  --sf-space-16: 64px;
  --sf-space-20: 80px;

  /* ─── Type scale ────────────────────────────────────── */
  --sf-text-xs: 0.72rem;
  --sf-text-sm: 0.82rem;
  --sf-text-base: 0.9rem;
  --sf-text-md: 1rem;
  --sf-text-lg: 1.15rem;
  --sf-text-xl: 1.3rem;
  --sf-text-2xl: 1.6rem;
  --sf-text-3xl: 2.2rem;
  --sf-text-4xl: 2.8rem;

  --sf-font-sans: 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sf-weight-regular: 400;
  --sf-weight-medium: 500;
  --sf-weight-semibold: 600;
  --sf-weight-bold: 700;

  --sf-leading-tight: 1.2;
  --sf-leading-normal: 1.5;
  --sf-leading-relaxed: 1.7;

  /* ─── Radius ────────────────────────────────────────── */
  --sf-radius-sm: 4px;
  --sf-radius-md: 6px;
  --sf-radius-lg: 10px;
  --sf-radius-xl: 16px;
  --sf-radius-full: 999px;

  /* ─── Shadow ────────────────────────────────────────── */
  --sf-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --sf-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --sf-shadow-lg: 0 16px 48px rgba(0,0,0,0.16);

  /* ─── Motion ────────────────────────────────────────── */
  --sf-transition-fast: 0.12s ease;
  --sf-transition-base: 0.2s ease;
  --sf-transition-slow: 0.3s ease;
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}