brand/styles/variables.css

/**
 * @hanzo/brand CSS Variables
 *
 * Official Hanzo Red: rgb(216, 28, 54) = #d81c33
 *
 * Usage:
 *   @import '@hanzo/brand/styles/variables.css';
 *   or link: <link rel="stylesheet" href="https://unpkg.com/@hanzo/brand/styles/variables.css">
 */

:root {
  /* ===== Hanzo Brand Red ===== */
  --hanzo-red: #d81c33;
  --hanzo-red-rgb: 216, 28, 54;
  --hanzo-red-50: #fdf2f3;
  --hanzo-red-100: #fce4e6;
  --hanzo-red-200: #fbcdd2;
  --hanzo-red-300: #f7a8b1;
  --hanzo-red-400: #f17485;
  --hanzo-red-500: #e6475c;
  --hanzo-red-600: #d81c33;
  --hanzo-red-700: #b5152b;
  --hanzo-red-800: #961528;
  --hanzo-red-900: #7d1626;
  --hanzo-red-950: #450710;

  /* ===== Semantic Aliases ===== */
  --brand: var(--hanzo-red);
  --brand-light: var(--hanzo-red-500);
  --brand-dark: var(--hanzo-red-700);
  --brand-hover: #c01830;
  --brand-secondary: var(--hanzo-red-400);

  /* ===== Dark Theme Backgrounds ===== */
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;
  --bg-card: rgba(23, 23, 23, 0.5);

  /* ===== Light Theme Backgrounds ===== */
  --bg-light: #ffffff;
  --bg-light-secondary: #fafafa;
  --bg-light-tertiary: #f5f5f5;

  /* ===== Borders ===== */
  --border: #262626;
  --border-light: #e5e5e5;
  --border-focus: var(--hanzo-red);

  /* ===== Text Colors (Dark Theme) ===== */
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --text-disabled: #525252;

  /* ===== Text Colors (Light Theme) ===== */
  --text-light-primary: #0a0a0b;
  --text-light-secondary: #525252;
  --text-light-muted: #737373;

  /* ===== Neutral Scale ===== */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --neutral-1000: #000000;

  /* ===== Semantic Colors ===== */
  --success: #10b981;
  --success-light: #34d399;
  --success-dark: #059669;

  --warning: #f59e0b;
  --warning-light: #fcd34d;
  --warning-dark: #d97706;

  --error: #ef4444;
  --error-light: #f87171;
  --error-dark: #dc2626;

  --info: #3b82f6;
  --info-light: #60a5fa;
  --info-dark: #2563eb;

  /* ===== Gradients ===== */
  --gradient-brand: linear-gradient(135deg, var(--hanzo-red-500) 0%, var(--hanzo-red) 100%);
  --gradient-accent: linear-gradient(135deg, var(--hanzo-red) 0%, var(--hanzo-red-700) 100%);
  --gradient-dark: linear-gradient(135deg, #0a0a0b 0%, #262626 100%);

  /* ===== Spacing ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ===== Border Radius ===== */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ===== Transitions ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Typography ===== */
  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', Monaco, monospace;
}

/* Dark theme (default for Hanzo) */
[data-theme="dark"],
.dark {
  color-scheme: dark;
}

/* Light theme */
[data-theme="light"],
.light {
  --bg-primary: var(--bg-light);
  --bg-secondary: var(--bg-light-secondary);
  --bg-tertiary: var(--bg-light-tertiary);
  --bg-card: rgba(255, 255, 255, 0.8);
  --border: var(--border-light);
  --text-primary: var(--text-light-primary);
  --text-secondary: var(--text-light-secondary);
  --text-muted: var(--text-light-muted);
  color-scheme: light;
}