/**
 * Lens Design System - Token Definitions
 *
 * Extracted from @lensapp/lds style.css.
 * These CSS custom properties define the LDS visual identity.
 * Only includes tokens relevant for documentation site theming.
 */

:root {
  /* ========================================
     COLORS - Backgrounds
     ======================================== */
  --lds-color-bg-primary: #181a1c;
  --lds-color-bg-secondary: #1f2123;
  --lds-color-bg-tertiary: #252729;

  /* ========================================
     COLORS - Borders & Dividers
     ======================================== */
  --lds-color-border: #2d2f31;
  --lds-color-border-focus: #3d90ce;

  /* ========================================
     COLORS - Surfaces
     ======================================== */
  --lds-color-surface-muted: #414345;
  --lds-color-surface-selected: #2d2f31;
  --lds-color-surface-hover: rgba(65, 67, 69, 0.3);

  /* ========================================
     COLORS - Text
     ======================================== */
  --lds-color-text-primary: #aaacae;
  --lds-color-text-muted: #616365;
  --lds-color-text-accent: #f1f3f5;
  --lds-color-text-disabled: #4a4c4e;
  --lds-color-text-inverse: #fff;

  /* ========================================
     COLORS - Interactive (Primary)
     ======================================== */
  --lds-color-primary: #3d90ce;
  --lds-color-primary-hover: #4a9dd8;
  --lds-color-primary-pressed: #3080b8;

  /* ========================================
     COLORS - Status
     ======================================== */
  --lds-color-success: #4caf50;
  --lds-color-success-muted: rgba(76, 175, 80, 0.2);
  --lds-color-warning: #ff9800;
  --lds-color-warning-muted: rgba(255, 152, 0, 0.2);
  --lds-color-critical: #ce3933;
  --lds-color-critical-muted: rgba(206, 57, 51, 0.2);
  --lds-color-info: #3d90ce;

  /* ========================================
     COLORS - Special
     ======================================== */
  --lds-color-code-bg: #1b1a1c;
  --lds-color-code-border: #2d2f31;
  --lds-color-selection: rgba(61, 144, 206, 0.3);
  --lds-color-workspace-purple: #9c27b0;

  /* ========================================
     TYPOGRAPHY - Font Family
     ======================================== */
  --lds-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --lds-font-family-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;

  /* ========================================
     TYPOGRAPHY - Font Size
     ======================================== */
  --lds-font-size-xs: 10px;
  --lds-font-size-sm: 11px;
  --lds-font-size-base: 12px;
  --lds-font-size-md: 13px;
  --lds-font-size-lg: 14px;
  --lds-font-size-xl: 16px;
  --lds-font-size-2xl: 20px;

  /* ========================================
     TYPOGRAPHY - Font Weight
     ======================================== */
  --lds-font-weight-regular: 400;
  --lds-font-weight-medium: 500;
  --lds-font-weight-semibold: 600;
  --lds-font-weight-bold: 700;

  /* ========================================
     SPACING
     ======================================== */
  --lds-space-half: 2px;
  --lds-space-1: 4px;
  --lds-space-2: 8px;
  --lds-space-3: 12px;
  --lds-space-4: 16px;
  --lds-space-5: 20px;
  --lds-space-6: 24px;
  --lds-space-8: 32px;

  /* ========================================
     DIMENSIONS - Heights (density system)
     ======================================== */
  --lds-height-tree-item: 24px;
  --lds-row-height-compact: 22px;
  --lds-row-height-standard: 34px;
  --lds-control-height-compact: 18px;
  --lds-control-height-standard: 26px;

  /* ========================================
     ICON SIZES
     ======================================== */
  --lds-icon-xs: 8px;
  --lds-icon-sm: 16px;
  --lds-icon-md: 20px;
  --lds-icon-lg: 24px;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --lds-radius-sm: 2px;
  --lds-radius-md: 4px;
  --lds-radius-lg: 6px;
  --lds-radius-xl: 8px;

  /* ========================================
     BORDER WIDTH
     ======================================== */
  --lds-border-width: 1px;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --lds-transition-fast: 0.1s ease;
  --lds-transition-normal: 0.15s ease;
  --lds-transition-slow: 0.25s ease;

  /* ========================================
     PROSE / DOCUMENTATION
     ======================================== */

  /* Prose - Text Colors */
  --lds-prose-color-heading: var(--lds-color-text-accent);
  --lds-prose-color-body: var(--lds-color-text-primary);
  --lds-prose-color-muted: var(--lds-color-text-muted);

  /* Prose - Link Colors */
  --lds-prose-color-link: var(--lds-color-primary);
  --lds-prose-color-link-hover: var(--lds-color-primary-hover);

  /* Prose - Code Colors */
  --lds-prose-color-code-bg: var(--lds-color-code-bg);
  --lds-prose-color-code-border: var(--lds-color-code-border);
  --lds-prose-color-code-text: var(--lds-color-text-primary);

  /* Prose - Blockquote Colors */
  --lds-prose-color-blockquote-bg: var(--lds-color-bg-tertiary);
  --lds-prose-color-blockquote-border: var(--lds-color-primary);

  /* Prose - Mark/Highlight Colors */
  --lds-prose-color-mark-bg: var(--lds-color-warning-muted);
  --lds-prose-color-mark-text: var(--lds-color-text-accent);

  /* Prose - Table Colors */
  --lds-prose-color-table-border: var(--lds-color-border);
  --lds-prose-color-table-header-bg: var(--lds-color-bg-tertiary);
  --lds-prose-color-table-row-alt-bg: var(--lds-color-bg-primary);

  /* Prose - Callout Colors: Note (informational, blue) */
  --lds-prose-color-callout-note-bg: rgba(61, 144, 206, 0.1);
  --lds-prose-color-callout-note-border: var(--lds-color-info);
  --lds-prose-color-callout-note-icon: var(--lds-color-info);

  /* Prose - Callout Colors: Warning (attention, yellow) */
  --lds-prose-color-callout-warning-bg: rgba(255, 152, 0, 0.1);
  --lds-prose-color-callout-warning-border: var(--lds-color-warning);
  --lds-prose-color-callout-warning-icon: var(--lds-color-warning);

  /* Prose - Callout Colors: Tip (helpful, green) */
  --lds-prose-color-callout-tip-bg: rgba(76, 175, 80, 0.1);
  --lds-prose-color-callout-tip-border: var(--lds-color-success);
  --lds-prose-color-callout-tip-icon: var(--lds-color-success);

  /* Prose - Callout Colors: Caution (danger, red) */
  --lds-prose-color-callout-caution-bg: rgba(206, 57, 51, 0.1);
  --lds-prose-color-callout-caution-border: var(--lds-color-critical);
  --lds-prose-color-callout-caution-icon: var(--lds-color-critical);

  /* Prose - Callout Colors: Important (highlight, purple) */
  --lds-prose-color-callout-important-bg: rgba(156, 39, 176, 0.1);
  --lds-prose-color-callout-important-border: var(--lds-color-workspace-purple);
  --lds-prose-color-callout-important-icon: var(--lds-color-workspace-purple);

  /* ========================================
     PROSE - Typography (sizes, weights, line heights)
     ======================================== */
  --lds-prose-line-height: 1.6;
  --lds-prose-line-height-heading: 1.3;
  --lds-prose-h1-size: var(--lds-font-size-2xl);         /* 20px */
  --lds-prose-h2-size: var(--lds-font-size-xl);          /* 16px */
  --lds-prose-h3-size: var(--lds-font-size-lg);          /* 14px */
  --lds-prose-h4-size: var(--lds-font-size-md);          /* 13px */
  --lds-prose-h1-weight: var(--lds-font-weight-semibold); /* 600 */
  --lds-prose-h2-weight: var(--lds-font-weight-medium);   /* 500 */
  --lds-prose-h3-weight: var(--lds-font-weight-medium);   /* 500 */
  --lds-prose-h4-weight: var(--lds-font-weight-medium);   /* 500 */

  /* ========================================
     PROSE - Spacing (margins, paddings, gaps)
     ======================================== */
  --lds-prose-heading-margin-top: var(--lds-space-6);    /* 24px */
  --lds-prose-heading-margin-bottom: var(--lds-space-3); /* 12px */
  --lds-prose-block-margin: var(--lds-space-3);          /* 12px */
  --lds-prose-list-indent: var(--lds-space-6);           /* 24px */
  --lds-prose-list-item-gap: var(--lds-space-1);         /* 4px */
  --lds-prose-code-inline-padding: 6px;
  --lds-prose-code-block-padding: var(--lds-space-4);    /* 16px */
  --lds-prose-blockquote-padding: var(--lds-space-4);    /* 16px */
  --lds-prose-blockquote-border-width: 3px;
  --lds-prose-table-cell-padding: var(--lds-space-3);    /* 12px */
  --lds-prose-callout-padding: var(--lds-space-4);       /* 16px */
  --lds-prose-callout-icon-gap: var(--lds-space-3);      /* 12px */

  /* ========================================
     PROSE - Dimensions
     ======================================== */
  --lds-prose-max-width: 980px;
  --lds-prose-min-width: 250px;
}