/* css/tokens.css — Remote& Design Tokens */
:root {
  /* ===== BRAND COLORS (unchanged) ===== */
  --color-brand: #DA7756;
  --color-brand-light: #E8A090;
  --color-brand-dark: #B85E3E;

  /* ===== SEMANTIC COLORS ===== */
  --color-bg: #FAF9F6;
  --color-text: #1A1A1A;
  --color-text-muted: #9B9590;
  --color-text-light: rgba(26, 26, 26, 0.4);
  --color-surface: rgba(255, 255, 255, 0.7);
  --color-surface-solid: #FFFFFF;
  --color-border: #E8E2DB;
  --color-border-light: rgba(232, 226, 219, 0.5);

  /* ===== BRAND ALPHA VARIANTS ===== */
  --color-brand-a4: rgba(218, 119, 86, 0.04);
  --color-brand-a6: rgba(218, 119, 86, 0.06);
  --color-brand-a8: rgba(218, 119, 86, 0.08);
  --color-brand-a10: rgba(218, 119, 86, 0.10);
  --color-brand-a12: rgba(218, 119, 86, 0.12);
  --color-brand-a15: rgba(218, 119, 86, 0.15);
  --color-brand-a20: rgba(218, 119, 86, 0.20);
  --color-brand-a25: rgba(218, 119, 86, 0.25);
  --color-brand-a30: rgba(218, 119, 86, 0.30);
  --color-brand-a50: rgba(218, 119, 86, 0.50);
  --color-brand-a60: rgba(218, 119, 86, 0.60);

  /* ===== DARK SURFACE ===== */
  --color-dark: #1A1A1A;
  --color-dark-a15: rgba(26, 26, 26, 0.15);

  /* ===== TYPOGRAPHY ===== */
  --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  --text-hero: clamp(2.5rem, 5vw, 4.5rem);
  --text-h2: clamp(1.875rem, 4vw, 3rem);
  --text-h3: 1.5rem;
  --text-card-title: 1.25rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-label: 0.875rem;
  --text-tag: 0.6875rem;
  --text-step: 0.8125rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ===== 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-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  /* ===== LAYOUT ===== */
  --container-max: 1200px;
  --container-text: 896px;
  --container-narrow: 768px;
  --container-hero: 1024px;

  --section-py: var(--space-20);
  --section-py-lg: var(--space-28);
  --section-px: var(--space-4);

  /* ===== RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px -15px rgba(0, 0, 0, 0.2), 0 8px 25px -8px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 70px -15px rgba(0, 0, 0, 0.25), 0 10px 30px -8px rgba(0, 0, 0, 0.18);
  --shadow-brand: 0 4px 12px rgba(218, 119, 86, 0.25);
  --shadow-brand-lg: 0 6px 16px rgba(218, 119, 86, 0.30);
  --shadow-glow: 0 0 8px rgba(218, 119, 86, 0.2);

  /* ===== TRANSITIONS ===== */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;

  /* ===== GRID BACKGROUND ===== */
  --grid-size: 40px;
  --grid-opacity: 0.06;
  --grid-highlight-opacity: 0.4;
  --grid-highlight-radius: 200px;

  /* ===== Z-INDEX ===== */
  --z-background: 0;
  --z-content: 10;
  --z-nav: 50;

  /* ===== WARM NEUTRALS (new) ===== */
  --color-charcoal: #2A2520;
  --color-charcoal-soft: #3D3630;
  --color-charcoal-a80: rgba(42, 37, 32, 0.80);
  --color-charcoal-a60: rgba(42, 37, 32, 0.60);
  --color-charcoal-a40: rgba(42, 37, 32, 0.40);
  --color-warm-gray: #6B635B;
  --color-cream: #F5EDE3;
  --color-cream-dark: #EDE3D6;
  --color-cream-alt: #FAF3E8;

  /* ===== SAGE ACCENT (new) ===== */
  --color-sage: #8FA68E;
  --color-sage-dark: #6B8169;
  --color-sage-a10: rgba(143, 166, 142, 0.10);
  --color-sage-a20: rgba(143, 166, 142, 0.20);
  --color-sage-a40: rgba(143, 166, 142, 0.40);

  /* ===== TEXT ON DARK ===== */
  --color-text-on-dark: #F5EDE3;
  --color-text-on-dark-muted: rgba(245, 237, 227, 0.65);
  --color-text-on-dark-faint: rgba(245, 237, 227, 0.40);
}