/**
 * CSS Custom Properties (Variables)
 * 
 * Defines all CSS custom properties used throughout the application.
 * These variables provide a centralized way to manage colors, spacing,
 * typography, and layout dimensions.
 */

:root {
  /* === Color Scheme === */
  --ink: #111;
  --border-color: #ddd;
  --hover-background: #ededed;
  --hover-background-strong: #dcdcdc;
  --bar-color: #000;
  --background: #fff;
  --text-color-secondary: #333;
  --text-color-tertiary: #444;
  --text-color-muted: #666;
  --text-color-button: rgb(85, 85, 85);
  --background-light: #f7f7f7;
  --background-lighter: #eee;
  --success-color: #4caf50;
  --success-background: #e8f5e9;
  --error-color: #d32f2f;
  --error-background: #ffebee;

  /* === Typography === */
  /* Site-wide font */
  --sans: "Noto Sans";
  /* Font for mathematical symbols and text */
  --math-font: "Noto Sans Math", sans-serif;
  --font-size: 16px;
  --line-height: 1.25;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;

  /* === Layout === */
  --page-margin: 10%;
  /* Column ratio for the two-column layout (left column width) */
  --left-ratio: 0.57;
  --grid-row-gap: 16px;
  --grid-col-gap: 16px;

  /* === Proof Geometry === */
  --proof-formula-min-width: 150px;
  --proof-formula-width: var(--proof-formula-min-width);
  --justification-gap: 0px;
  /* Default justification width; will be updated dynamically */
  --justification-width: 100px;
  /* Widened to fit 5 buttons */
  --actions-width: 160px;
  --proof-indent: 20px;
  --bar-width: 2px;
  --horizontal-bar-length: 20px;
  --horizontal-bar-extra-width: 20px;
  --proof-text-gap: 0px;
  --bar-cap-gap: 6px;

  /* === Spacing & Sizing === */
  --proof-row-padding-vertical: 4px;
  --line-number-padding-vertical: 6px;
  --justification-padding-vertical: 4px;
  --justification-padding-horizontal: 10px;
  --proof-row-min-height: 34px;
  --input-padding-vertical: 2px;
  --line-actions-gap: 6px;
  /* Dynamic line-number column width */
  --line-number-width: calc(3ch + 8px);
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 40px;

  /* === Border Radius === */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 12px;

  /* === Component-Specific Dimensions === */
  --input-min-height: 22px;
  --action-btn-width: 24px;
  --action-btn-height: 34px;
  --problem-setup-label-width: 120px;
  --problem-summary-margin-bottom: 34px;
  --instruction-section-padding: 10px;
  --proof-padding-bottom: 12px;
  --help-margin: 8px 2px;
  --logic-select-width: 50%;
  --editor-actions-margin-top: 20px;

  /* === Transitions === */
  --transition-fast: 0.05s linear;
  --transition-medium: 0.08s linear;
}