/* ============================================================
   SELLER EM FOCO — DESIGN TOKENS
   All CSS Custom Properties for the Design System
   ============================================================ */

:root {
  /* ── COLOR: Backgrounds ──────────────────────────────── */
  --sf-bg-primary: #050505;
  --sf-bg-secondary: #0D0D0D;
  --sf-bg-tertiary: #141414;
  --sf-bg-elevated: #1A1A1A;
  --sf-bg-inset: #0A0A0A;

  /* ── COLOR: Surfaces ─────────────────────────────────── */
  --sf-surface-card: rgba(255, 255, 255, 0.03);
  --sf-surface-card-hover: rgba(255, 255, 255, 0.06);
  --sf-surface-glass: rgba(255, 255, 255, 0.04);
  --sf-surface-glass-strong: rgba(255, 255, 255, 0.08);
  --sf-surface-overlay: rgba(0, 0, 0, 0.60);

  /* ── COLOR: Borders ──────────────────────────────────── */
  --sf-border-subtle: rgba(255, 255, 255, 0.06);
  --sf-border-default: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.15);
  --sf-border-accent: rgba(255, 59, 48, 0.30);

  /* ── COLOR: Text ─────────────────────────────────────── */
  --sf-text-primary: #FAFAFA;
  --sf-text-secondary: rgba(255, 255, 255, 0.60);
  --sf-text-tertiary: rgba(255, 255, 255, 0.35);
  --sf-text-muted: rgba(255, 255, 255, 0.20);
  --sf-text-inverse: #050505;

  /* ── COLOR: Accent (Red/Orange) ──────────────────────── */
  --sf-accent: #FF3B30;
  --sf-accent-hover: #FF5147;
  --sf-accent-active: #E0342B;
  --sf-accent-glow: rgba(255, 59, 48, 0.25);
  --sf-accent-subtle: rgba(255, 59, 48, 0.10);
  --sf-accent-gradient: linear-gradient(135deg, #FF3B30, #FF6B35);
  --sf-accent-gradient-hover: linear-gradient(135deg, #FF5147, #FF7F45);

  /* ── COLOR: Semantic ─────────────────────────────────── */
  --sf-success: #34C759;
  --sf-success-bg: rgba(52, 199, 89, 0.10);
  --sf-success-border: rgba(52, 199, 89, 0.20);
  --sf-success-text: #34C759;

  --sf-warning: #FFD60A;
  --sf-warning-bg: rgba(255, 214, 10, 0.10);
  --sf-warning-border: rgba(255, 214, 10, 0.20);
  --sf-warning-text: #FFD60A;

  --sf-info: #5AC8FA;
  --sf-info-bg: rgba(90, 200, 250, 0.10);
  --sf-info-border: rgba(90, 200, 250, 0.20);
  --sf-info-text: #5AC8FA;

  --sf-danger: #FF3B30;
  --sf-danger-bg: rgba(255, 59, 48, 0.10);
  --sf-danger-border: rgba(255, 59, 48, 0.20);
  --sf-danger-text: #FF453A;

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  --sf-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sf-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* Font Sizes */
  --sf-text-2xs: 0.625rem;   /* 10px */
  --sf-text-xs: 0.75rem;     /* 12px */
  --sf-text-sm: 0.8125rem;   /* 13px */
  --sf-text-base: 0.875rem;  /* 14px */
  --sf-text-md: 0.9375rem;   /* 15px */
  --sf-text-lg: 1.0625rem;   /* 17px */
  --sf-text-xl: 1.3125rem;   /* 21px */
  --sf-text-2xl: 1.6875rem;  /* 27px */
  --sf-text-3xl: 2.25rem;    /* 36px */
  --sf-text-4xl: 3rem;       /* 48px */
  --sf-text-5xl: 3.75rem;    /* 60px */
  --sf-text-hero: 4.5rem;    /* 72px */

  /* Font Weights */
  --sf-weight-regular: 400;
  --sf-weight-medium: 500;
  --sf-weight-semibold: 600;
  --sf-weight-bold: 700;
  --sf-weight-extrabold: 800;

  /* Line Heights */
  --sf-leading-tight: 1.1;
  --sf-leading-snug: 1.25;
  --sf-leading-normal: 1.5;
  --sf-leading-relaxed: 1.7;

  /* Letter Spacing */
  --sf-tracking-tight: -0.02em;
  --sf-tracking-normal: 0;
  --sf-tracking-wide: 0.04em;
  --sf-tracking-wider: 0.08em;
  --sf-tracking-widest: 0.12em;

  /* ── SPACING ─────────────────────────────────────────── */
  --sf-space-0: 0;
  --sf-space-px: 1px;
  --sf-space-0-5: 0.125rem;  /* 2px */
  --sf-space-1: 0.25rem;     /* 4px */
  --sf-space-1-5: 0.375rem;  /* 6px */
  --sf-space-2: 0.5rem;      /* 8px */
  --sf-space-2-5: 0.625rem;  /* 10px */
  --sf-space-3: 0.75rem;     /* 12px */
  --sf-space-4: 1rem;        /* 16px */
  --sf-space-5: 1.25rem;     /* 20px */
  --sf-space-6: 1.5rem;      /* 24px */
  --sf-space-8: 2rem;        /* 32px */
  --sf-space-10: 2.5rem;     /* 40px */
  --sf-space-12: 3rem;       /* 48px */
  --sf-space-14: 3.5rem;     /* 56px */
  --sf-space-16: 4rem;       /* 64px */
  --sf-space-20: 5rem;       /* 80px */
  --sf-space-24: 6rem;       /* 96px */
  --sf-space-section: 7rem;  /* 112px */

  /* ── BORDER RADIUS ───────────────────────────────────── */
  --sf-radius-xs: 4px;
  --sf-radius-sm: 6px;
  --sf-radius-md: 10px;
  --sf-radius-lg: 16px;
  --sf-radius-xl: 24px;
  --sf-radius-2xl: 32px;
  --sf-radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────── */
  --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --sf-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);
  --sf-shadow-glow: 0 0 40px var(--sf-accent-glow);
  --sf-shadow-glow-sm: 0 0 20px var(--sf-accent-glow);

  /* ── TRANSITIONS ─────────────────────────────────────── */
  --sf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --sf-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --sf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-INDEX SCALE ───────────────────────────────────── */
  --sf-z-base: 0;
  --sf-z-raised: 10;
  --sf-z-dropdown: 100;
  --sf-z-sticky: 200;
  --sf-z-overlay: 300;
  --sf-z-modal: 400;
  --sf-z-toast: 500;

  /* ── LAYOUT ──────────────────────────────────────────── */
  --sf-container-max: 1200px;
  --sf-container-narrow: 680px;
  --sf-container-padding: 1.5rem;
  --sf-nav-height: 72px;

  /* ── BLUR / GLASS ────────────────────────────────────── */
  --sf-blur-sm: 8px;
  --sf-blur-md: 16px;
  --sf-blur-lg: 32px;
  --sf-blur-xl: 64px;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Apply via: <html data-sf-theme="light">
   ══════════════════════════════════════════════════════════ */
[data-sf-theme="light"] {
  /* ── Backgrounds ─────────────────────────────────────── */
  --sf-bg-primary: #FAFAFA;
  --sf-bg-secondary: #F2F2F3;
  --sf-bg-tertiary: #EAEAEC;
  --sf-bg-elevated: #FFFFFF;
  --sf-bg-inset: #F5F5F7;

  /* ── Surfaces ────────────────────────────────────────── */
  --sf-surface-card: rgba(0, 0, 0, 0.02);
  --sf-surface-card-hover: rgba(0, 0, 0, 0.04);
  --sf-surface-glass: rgba(255, 255, 255, 0.60);
  --sf-surface-glass-strong: rgba(255, 255, 255, 0.80);
  --sf-surface-overlay: rgba(255, 255, 255, 0.70);

  /* ── Borders ─────────────────────────────────────────── */
  --sf-border-subtle: rgba(0, 0, 0, 0.06);
  --sf-border-default: rgba(0, 0, 0, 0.10);
  --sf-border-strong: rgba(0, 0, 0, 0.16);
  --sf-border-accent: rgba(255, 59, 48, 0.25);

  /* ── Text ────────────────────────────────────────────── */
  --sf-text-primary: #1A1A1A;
  --sf-text-secondary: rgba(0, 0, 0, 0.55);
  --sf-text-tertiary: rgba(0, 0, 0, 0.35);
  --sf-text-muted: rgba(0, 0, 0, 0.18);
  --sf-text-inverse: #FAFAFA;

  /* ── Accent (slightly deeper for contrast) ───────────── */
  --sf-accent: #E0342B;
  --sf-accent-hover: #CC2E26;
  --sf-accent-active: #B5281F;
  --sf-accent-glow: rgba(224, 52, 43, 0.15);
  --sf-accent-subtle: rgba(224, 52, 43, 0.08);
  --sf-accent-gradient: linear-gradient(135deg, #E0342B, #E85D2A);
  --sf-accent-gradient-hover: linear-gradient(135deg, #CC2E26, #D44F22);

  /* ── Semantic (darker for light bg legibility) ───────── */
  --sf-success: #1D9E40;
  --sf-success-bg: rgba(29, 158, 64, 0.08);
  --sf-success-border: rgba(29, 158, 64, 0.18);
  --sf-success-text: #1D9E40;

  --sf-warning: #B38C00;
  --sf-warning-bg: rgba(179, 140, 0, 0.08);
  --sf-warning-border: rgba(179, 140, 0, 0.18);
  --sf-warning-text: #8C6D00;

  --sf-info: #0080C7;
  --sf-info-bg: rgba(0, 128, 199, 0.08);
  --sf-info-border: rgba(0, 128, 199, 0.18);
  --sf-info-text: #0080C7;

  --sf-danger: #D32F2F;
  --sf-danger-bg: rgba(211, 47, 47, 0.07);
  --sf-danger-border: rgba(211, 47, 47, 0.18);
  --sf-danger-text: #C62828;

  /* ── Shadows (softer, neutral) ───────────────────────── */
  --sf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --sf-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.12);
  --sf-shadow-glow: 0 0 40px rgba(224, 52, 43, 0.12);
  --sf-shadow-glow-sm: 0 0 20px rgba(224, 52, 43, 0.10);
}

/* Smooth theme transition on body */
html {
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ── RESPONSIVE TOKEN OVERRIDES ────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sf-text-hero: 2.75rem;
    --sf-text-5xl: 2.5rem;
    --sf-text-4xl: 2rem;
    --sf-text-3xl: 1.75rem;
    --sf-text-2xl: 1.5rem;
    --sf-space-section: 4.5rem;
    --sf-container-padding: 1.25rem;
    --sf-nav-height: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --sf-text-hero: 2.25rem;
    --sf-text-5xl: 2rem;
    --sf-text-4xl: 1.75rem;
    --sf-text-3xl: 1.5rem;
    --sf-space-section: 3.5rem;
    --sf-container-padding: 1rem;
  }
}