/*
  OFI Premium UI — Theme Tokens
  Version: v0.1.0 — Phase 1
  Purpose: Global visual variables for reusable HTML/CSS/JS apps.
*/

:root,
[data-ofi-theme="default"] {
  /* Brand */
  --ofi-primary: #14b8a6;
  --ofi-primary-hover: #0d9488;
  --ofi-primary-dark: #0f766e;
  --ofi-primary-soft: #ccfbf1;
  --ofi-primary-softer: #f0fdfa;

  --ofi-secondary: #2563eb;
  --ofi-secondary-hover: #1d4ed8;
  --ofi-secondary-dark: #1e3a8a;
  --ofi-secondary-soft: #dbeafe;
  --ofi-secondary-softer: #eff6ff;

  /* Semantic */
  --ofi-success: #16a34a;
  --ofi-success-soft: #dcfce7;
  --ofi-warning: #f59e0b;
  --ofi-warning-soft: #fef3c7;
  --ofi-danger: #dc2626;
  --ofi-danger-soft: #fee2e2;
  --ofi-info: #0284c7;
  --ofi-info-soft: #e0f2fe;
  --ofi-premium: #7c3aed;
  --ofi-premium-soft: #ede9fe;

  /* Surfaces */
  --ofi-bg: #f7f4ee;
  --ofi-bg-alt: #f8fafc;
  --ofi-surface: #ffffff;
  --ofi-surface-soft: #f8fafc;
  --ofi-surface-muted: #f1f5f9;
  --ofi-dark: #0f172a;
  --ofi-dark-soft: #1e293b;

  /* Text */
  --ofi-text: #0f172a;
  --ofi-text-soft: #334155;
  --ofi-muted: #64748b;
  --ofi-muted-light: #94a3b8;
  --ofi-white: #ffffff;

  /* Borders */
  --ofi-border: #e2e8f0;
  --ofi-border-soft: #f1f5f9;
  --ofi-border-strong: #cbd5e1;

  /* Typography */
  --ofi-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ofi-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ofi-text-xs: 0.75rem;
  --ofi-text-sm: 0.875rem;
  --ofi-text-base: 1rem;
  --ofi-text-lg: 1.125rem;
  --ofi-text-xl: 1.25rem;
  --ofi-text-2xl: 1.5rem;
  --ofi-text-3xl: 1.875rem;
  --ofi-text-4xl: 2.25rem;

  /* Radius */
  --ofi-radius-xs: 6px;
  --ofi-radius-sm: 10px;
  --ofi-radius-md: 16px;
  --ofi-radius-lg: 24px;
  --ofi-radius-xl: 32px;
  --ofi-radius-full: 999px;

  /* Spacing */
  --ofi-space-1: 4px;
  --ofi-space-2: 8px;
  --ofi-space-3: 12px;
  --ofi-space-4: 16px;
  --ofi-space-5: 20px;
  --ofi-space-6: 24px;
  --ofi-space-7: 32px;
  --ofi-space-8: 40px;
  --ofi-space-9: 48px;
  --ofi-space-10: 64px;

  /* Shadows */
  --ofi-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ofi-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --ofi-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
  --ofi-shadow-medium: 0 18px 45px rgba(15, 23, 42, 0.12);
  --ofi-shadow-strong: 0 26px 70px rgba(15, 23, 42, 0.18);
  --ofi-shadow-primary: 0 14px 30px rgba(20, 184, 166, 0.24);

  /* Layout */
  --ofi-container: 1180px;
  --ofi-container-wide: 1440px;
  --ofi-sidebar-width: 288px;
  --ofi-topbar-height: 76px;

  /* Motion */
  --ofi-transition-fast: 140ms ease;
  --ofi-transition: 220ms ease;
  --ofi-transition-slow: 320ms ease;

  /* Z-index scale */
  --ofi-z-base: 1;
  --ofi-z-dropdown: 50;
  --ofi-z-sticky: 100;
  --ofi-z-sidebar: 250;
  --ofi-z-drawer: 500;
  --ofi-z-modal: 1000;
  --ofi-z-toast: 1200;
}

[data-ofi-theme="blue"] {
  --ofi-primary: #2563eb;
  --ofi-primary-hover: #1d4ed8;
  --ofi-primary-dark: #1e3a8a;
  --ofi-primary-soft: #dbeafe;
  --ofi-primary-softer: #eff6ff;
}

[data-ofi-theme="emerald"] {
  --ofi-primary: #10b981;
  --ofi-primary-hover: #059669;
  --ofi-primary-dark: #047857;
  --ofi-primary-soft: #d1fae5;
  --ofi-primary-softer: #ecfdf5;
}

[data-ofi-theme="slate"] {
  --ofi-primary: #334155;
  --ofi-primary-hover: #1e293b;
  --ofi-primary-dark: #0f172a;
  --ofi-primary-soft: #e2e8f0;
  --ofi-primary-softer: #f8fafc;
}

[data-ofi-theme="premium"] {
  --ofi-primary: #7c3aed;
  --ofi-primary-hover: #6d28d9;
  --ofi-primary-dark: #5b21b6;
  --ofi-primary-soft: #ede9fe;
  --ofi-primary-softer: #f5f3ff;
}

[data-ofi-theme="dark"] {
  --ofi-bg: #020617;
  --ofi-bg-alt: #0f172a;
  --ofi-surface: #111827;
  --ofi-surface-soft: #1f2937;
  --ofi-surface-muted: #334155;
  --ofi-text: #f8fafc;
  --ofi-text-soft: #cbd5e1;
  --ofi-muted: #94a3b8;
  --ofi-border: rgba(255, 255, 255, 0.12);
  --ofi-border-soft: rgba(255, 255, 255, 0.08);
}