/**
 * Global Design Tokens - Design Studio
 * 
 * Shared CSS custom properties used across all projects
 */

:root {
  /* ============================================================================
   * COLOR TOKENS
   * ============================================================================ */
  
  /* Primary Brand - Amber Gold */
  --color-primary: #F59E0B;
  --color-primary-light: #FBBF24;
  --color-primary-dark: #D97706;
  --color-primary-glow: rgba(245, 158, 11, 0.3);

  /* Dark Mode Backgrounds */
  --color-bg-deep: #0A0C10;
  --color-bg-primary: #0F1419;
  --color-bg-surface: #161B22;
  --color-bg-surface-elevated: #1C2128;
  --color-bg-surface-hover: #21262D;

  /* Dark Mode Text */
  --color-text-primary: #F0F6FC;
  --color-text-secondary: #8B949E;
  --color-text-muted: #6E7681;

  /* Dark Mode Borders */
  --color-border-primary: #30363D;
  --color-border-secondary: #21262D;

  /* Light Mode Backgrounds */
  --color-bg-light-primary: #F8FAFC;
  --color-bg-light-surface: #FFFFFF;
  --color-bg-light-elevated: #FFFFFF;
  --color-bg-light-hover: #F1F5F9;

  /* Light Mode Text */
  --color-text-light-primary: #0F172A;
  --color-text-light-secondary: #475569;
  --color-text-light-muted: #94A3B8;

  /* Light Mode Borders */
  --color-border-light-primary: #E2E8F0;
  --color-border-light-secondary: #CBD5E1;

  /* ============================================================================
   * TYPOGRAPHY TOKENS
   * ============================================================================ */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes - granular scale */
  --font-size-11: 0.6875rem;    /* 11px */
  --font-size-12: 0.75rem;      /* 12px */
  --font-size-13: 0.8125rem;    /* 13px */
  --font-size-14: 0.875rem;     /* 14px */
  --font-size-15: 0.9375rem;    /* 15px */
  --font-size-16: 1rem;         /* 16px */
  --font-size-18: 1.125rem;     /* 18px */
  --font-size-20: 1.25rem;      /* 20px */
  --font-size-22: 1.375rem;     /* 22px */
  --font-size-24: 1.5rem;       /* 24px */
  
  /* Semantic aliases */
  --font-size-sm: var(--font-size-12);
  --font-size-base: var(--font-size-13);
  --font-size-lg: var(--font-size-14);

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.3;

  /* Icon sizes = font-size × line-height 1.2 (icons match adjacent text line height) */
  --icon-size-13: 16px;         /* 13px × 1.2 */
  --icon-size-14: 17px;         /* 14px × 1.2 */
  --icon-size-15: 18px;         /* 15px × 1.2 */
  --icon-size-16: 19px;         /* 16px × 1.2 */
  --icon-size-18: 22px;         /* 18px × 1.2 */
  --icon-size-20: 24px;         /* 20px × 1.2 */
  --icon-size-22: 26px;         /* 22px × 1.2 */
  --icon-size-24: 29px;         /* 24px × 1.2 */
  
  /* Semantic aliases */
  --icon-size-sm: var(--icon-size-14);
  --icon-size-base: var(--icon-size-16);
  --icon-size-lg: var(--icon-size-18);

  /* ============================================================================
   * SPACING TOKENS
   * ============================================================================ */

  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* ============================================================================
   * BORDER RADIUS TOKENS
   * 
   * Nested Container Rule: outer_radius = inner_radius + gap
   * ============================================================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Tab nested radius: inner 12px + gap 8px = outer 20px */
  --radius-tab-inner: var(--radius-lg);
  --radius-tab-gap: var(--spacing-2);
  --radius-tab-outer: var(--radius-2xl);

  /* ============================================================================
   * SHADOW TOKENS
   * ============================================================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

  /* ============================================================================
   * TRANSITION TOKENS
   * ============================================================================ */

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
 * THEME SWITCHING
 * ============================================================================ */

[data-theme="dark"] {
  --color-bg: var(--color-bg-primary);
  --color-surface: var(--color-bg-surface);
  --color-surface-elevated: var(--color-bg-surface-elevated);
  --color-surface-hover: var(--color-bg-surface-hover);
  --color-text: var(--color-text-primary);
  --color-text-2: var(--color-text-secondary);
  --color-text-3: var(--color-text-muted);
  --color-border: var(--color-border-primary);
  --color-border-2: var(--color-border-secondary);
}

[data-theme="light"] {
  --color-bg: var(--color-bg-light-primary);
  --color-surface: var(--color-bg-light-surface);
  --color-surface-elevated: var(--color-bg-light-elevated);
  --color-surface-hover: var(--color-bg-light-hover);
  --color-text: var(--color-text-light-primary);
  --color-text-2: var(--color-text-light-secondary);
  --color-text-3: var(--color-text-light-muted);
  --color-border: var(--color-border-light-primary);
  --color-border-2: var(--color-border-light-secondary);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}