/*
 * one Design System - Color Tokens
 * Import this before other stylesheets
 */

:root {
  /* one Framework Colors */
  --black: #000000;
  --grey-900: #111111;
  --grey-800: #1a1a1a;
  --grey-700: #222222;
  --grey-600: #525252;
  --grey-500: #737373;
  --grey-400: #a3a3a3;
  --grey-300: #d4d4d4;
  --grey-200: #d4d4d4;
  --grey-100: #f4f4f4;
  --white: #ffffff;
  
  /* Brand */
  --brand: #8b7f72;
  --brand-light: #a39486;
  --brand-dark: #6d6256;
  
  /* Semantic Colors */
  --success: #4ade80;
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.3);
  
  --error: #ff6b6b;
  --error-bg: rgba(220, 38, 38, 0.1);
  --error-border: rgba(220, 38, 38, 0.3);
  
  --warning: #fbbf24;
  --warning-bg: rgba(234, 179, 8, 0.1);
  --warning-border: rgba(234, 179, 8, 0.3);
  
  --info: #60a5fa;
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-border: rgba(59, 130, 246, 0.3);
  
  /* Background Hierarchy */
  --bg-primary: var(--black);
  --bg-secondary: var(--grey-900);
  --bg-tertiary: var(--grey-800);
  --bg-hover: var(--grey-700);
  
  /* Text Hierarchy */
  --text-primary: var(--grey-200);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --text-brand: var(--brand);
  
  /* Border Colors */
  --border-primary: var(--grey-800);
  --border-secondary: var(--grey-700);
  --border-brand: var(--brand);
}