/* ==========================================================================
   00-tokens.css — Rentl Design Tokens
   ========================================================================== */

:root {
  /* Brand */
  --rentl-orange: #ff5700;
  --rentl-orange-light: #ff884d;
  --rentl-orange-dark: #cc4600;

  /* Semantic — Light Mode */
  --rentl-color-heading: #1a1a1a;
  --rentl-color-text: #4a4a4a;
  --rentl-color-text-muted: #6b7280;
  --rentl-color-border: rgba(0, 0, 0, 0.10);
  --rentl-color-border-strong: rgba(0, 0, 0, 0.18);
  --rentl-color-surface: #ffffff;
  --rentl-color-surface-soft: #f8f9fa;
  --rentl-color-surface-raised: #ffffff;
  --rentl-color-focus: var(--rentl-orange);

  /* Status */
  --rentl-color-available: #065f46;
  --rentl-color-available-bg: rgba(16, 185, 129, 0.12);
  --rentl-color-unavailable: #991b1b;
  --rentl-color-unavailable-bg: rgba(239, 68, 68, 0.12);
  --rentl-color-error: #dc2626;
  --rentl-color-error-bg: rgba(220, 38, 38, 0.08);

  /* Typography */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --rentl-font-size-xs: 0.75rem;
  --rentl-font-size-sm: 0.875rem;
  --rentl-font-size-base: 1rem;
  --rentl-font-size-md: 1.125rem;
  --rentl-font-size-lg: 1.25rem;
  --rentl-font-size-xl: 1.5rem;
  --rentl-font-size-2xl: 2rem;
  --rentl-font-size-3xl: 2.5rem;
  --rentl-font-size-4xl: 3rem;
  --rentl-line-height-tight: 1.12;
  --rentl-line-height-heading: 1.18;
  --rentl-line-height-body: 1.65;

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

  /* Layout */
  --rentl-container-sm: 48rem;
  --rentl-container-md: 64rem;
  --rentl-container: 75rem;
  --rentl-container-wide: 85rem;
  --rentl-container-gutter: 2.5rem;
  --rentl-section-y: 6rem;
  --rentl-section-y-sm: 4rem;
  --rentl-section-y-lg: 8rem;
  --rentl-grid-gap: 1.5rem;

  /* Radius */
  --rentl-radius-xs: 0.25rem;
  --rentl-radius-sm: 0.375rem;
  --rentl-radius: 0.5rem;
  --rentl-radius-pill: 999px;

  /* Shadow */
  --rentl-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.07);
  --rentl-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.10);
  --rentl-shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.14);

  /* Transition */
  --rentl-transition-fast: 140ms ease;
  --rentl-transition: 200ms ease;
  --rentl-transition-slow: 320ms ease;
}

/* Dark mode — system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --rentl-color-heading: #f5f5f5;
    --rentl-color-text: #d1d1d1;
    --rentl-color-text-muted: #9ca3af;
    --rentl-color-border: rgba(255, 255, 255, 0.08);
    --rentl-color-border-strong: rgba(255, 255, 255, 0.14);
    --rentl-color-surface: #141414;
    --rentl-color-surface-soft: #1e1e1e;
    --rentl-color-surface-raised: #242424;
    --rentl-color-available: #10b981;
    --rentl-color-unavailable: #f87171;
    --rentl-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);
    --rentl-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.50);
  }
}

/* Dark mode — explicit toggle */
[data-theme="dark"] {
  --rentl-color-heading: #f5f5f5;
  --rentl-color-text: #d1d1d1;
  --rentl-color-text-muted: #9ca3af;
  --rentl-color-border: rgba(255, 255, 255, 0.08);
  --rentl-color-border-strong: rgba(255, 255, 255, 0.14);
  --rentl-color-surface: #141414;
  --rentl-color-surface-soft: #1e1e1e;
  --rentl-color-surface-raised: #242424;
  --rentl-color-available: #10b981;
  --rentl-color-unavailable: #f87171;
  --rentl-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);
  --rentl-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.50);
}

/* Light mode — explicit toggle (overrides system dark) */
[data-theme="light"] {
  --rentl-color-heading: #1a1a1a;
  --rentl-color-text: #4a4a4a;
  --rentl-color-text-muted: #6b7280;
  --rentl-color-border: rgba(0, 0, 0, 0.10);
  --rentl-color-border-strong: rgba(0, 0, 0, 0.18);
  --rentl-color-surface: #ffffff;
  --rentl-color-surface-soft: #f8f9fa;
  --rentl-color-surface-raised: #ffffff;
  --rentl-color-available: #065f46;
  --rentl-color-unavailable: #991b1b;
  --rentl-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.07);
  --rentl-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.10);
}