/*
 * Relay Design System Tokens
 *
 * A unified visual language for Relay's web interface.
 * Style: "Dark vibrancy glass UI — dense, paneled, hairline borders,
 *         subtle elevation, minimal semantic accents"
 */

:root {
  /* =========================================
   * COLORS
   * ========================================= */

  /* Background layers (darkest to lightest) */
  --color-bg-base: #090A0E;        /* Window/app background */
  --color-bg-surface: #131520;     /* Primary panels */
  --color-bg-elevated: #1A1D2A;    /* Elevated panels, modals */
  --color-bg-hover: #1F2433;       /* Hover states */
  --color-bg-active: #252A3A;      /* Active/pressed states */

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  /* Text */
  --color-text-primary: #E8E9ED;   /* Primary content */
  --color-text-secondary: #9298A8; /* Secondary, labels */
  --color-text-tertiary: #5C6370;  /* Disabled, hints */
  --color-text-inverse: #090A0E;   /* Text on light backgrounds */

  /* Semantic - Status */
  --color-status-success: #89BE9D;    /* Complete, connected */
  --color-status-warning: #E5C07B;    /* Blocked, attention */
  --color-status-error: #E06C75;      /* Error, failed */
  --color-status-info: #61AFEF;       /* In progress, info */
  --color-status-neutral: #5C6370;    /* Icebox, inactive */

  /* Semantic - Interactive */
  --color-interactive-default: #405783;
  --color-interactive-hover: #4A6491;
  --color-interactive-active: #5A75A3;

  /* State mapping (Relay-specific) */
  --color-state-icebox: var(--color-status-neutral);
  --color-state-backlog: var(--color-text-secondary);
  --color-state-in-progress: var(--color-status-info);
  --color-state-blocked: var(--color-status-warning);
  --color-state-in-review: #C792EA;   /* Purple for review */
  --color-state-complete: var(--color-status-success);

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

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;

  /* Font sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

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

  /* Base unit: 4px */
  --space-1: 4px;    /* Icon-to-text gap */
  --space-2: 8px;    /* Compact padding, list gaps */
  --space-3: 12px;   /* Standard padding */
  --space-4: 16px;   /* Section gaps */
  --space-6: 24px;   /* Panel padding, major sections */
  --space-8: 32px;   /* Page margins */

  /* =========================================
   * BORDERS & RADII
   * ========================================= */

  --radius-sm: 4px;     /* Buttons, inputs, chips */
  --radius-md: 8px;     /* Cards, rows */
  --radius-lg: 12px;    /* Panels, modals */
  --radius-full: 999px; /* Pills, status dots */

  /* =========================================
   * LAYOUT
   * ========================================= */

  --sidebar-width: 330px;   /* 50% wider than previous 220px */
  --inspector-width: 640px; /* 2x wider than previous 320px */
  --header-height: 48px;

  /* =========================================
   * TRANSITIONS
   * ========================================= */

  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* =========================================
   * Z-INDEX SCALE
   * ========================================= */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* =========================================
   * TOUCH TARGETS (Mobile)
   * Apple HIG: 44x44px minimum
   * Material Design: 48x48dp minimum
   * ========================================= */

  --touch-target-min: 44px;      /* Minimum touch target (Apple HIG) */
  --touch-target-comfortable: 48px; /* Comfortable touch target (Material) */

  /* =========================================
   * SAFE AREA INSETS
   * For notched devices (iPhone X+, etc.)
   * Uses env() with fallback to 0
   * ========================================= */

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

/* Dark mode is the default */
html {
  color-scheme: dark;
}

/* =========================================
 * MOBILE FONT SCALING
 * Increase base font sizes below 768px for
 * better readability without pinch zoom
 * ========================================= */

@media (max-width: 768px) {
  :root {
    --text-xs: 12px;   /* Was 11px */
    --text-sm: 13px;   /* Was 12px */
    --text-base: 15px; /* Was 13px */
    --text-md: 15px;   /* Was 14px */
    --text-lg: 17px;   /* Was 16px */
    --text-xl: 19px;   /* Was 18px */
  }
}