/* ============================================================
   Sorto Website Design Tokens
   Mirrors electron/src/renderer/src/styles/global.css (light mode)
   Single source of swap-out values — keep variable names aligned
   with the app so site + app stay name-locked.
   ============================================================ */

:root {
  /* Surfaces — warm neutrals: warm off-white base lifts to white surface */
  --bg-base: #FAF8F5;
  --bg-surface: #FFFFFF;
  --bg-stat-card: #FFFFFF;
  --bg-elevated: #F5F2EC;
  --bg-overlay: #EDE9E2;
  --bg-float: #E2DCD2;

  /* Text — warm-biased near-black */
  --text-primary: #1C1A17;
  --text-secondary: #3F3A33;
  --text-muted: #6B655C;
  --text-disabled: #9C958A;

  /* Borders — warm hairlines */
  --border-subtle: #E8E4DD;
  --border-default: #D9D4CB;
  --border-strong: #B8B1A4;

  /* Accent — refined ink-blue, reserved for interactive/active states */
  --accent: #2B4A8B;
  --accent-hover: #34579E;
  --accent-active: #1F3A6F;
  --accent-subtle: rgba(43, 74, 139, 0.18);
  --accent-text: #2B4A8B;
  --accent-bg: rgba(43, 74, 139, 0.08);

  /* Functional */
  --success: #1F7A4D;
  --success-dot: #1F7A4D;
  --warning: #B5731C;
  --error: #B23A3A;
  --error-dark: #991B1B;
  --error-dark-hover: #7F1D1D;
  --error-dark-active: #6B1A1A;
  --success-subtle: rgba(16, 185, 129, 0.10);
  --warning-subtle: rgba(245, 158, 11, 0.10);
  --error-subtle: rgba(239, 68, 68, 0.10);

  /* Shadows — layered, tuned for light surfaces */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow-accent: 0 0 0 1px rgba(30, 64, 175, 0.10), 0 4px 16px rgba(30, 64, 175, 0.08);

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #2B4A8B, #34579E);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

  /* Selection */
  --selection-bg: rgba(30, 64, 175, 0.15);

  /* Aliases */
  --bg-primary: var(--bg-base);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary: var(--bg-elevated);
  --border: var(--border-default);
}

/* Global polish — applies site-wide */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

a {
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Apply tabular-nums to any element that primarily renders numeric data */
.plan-price,
.sorto-progress__count,
.sorto-activity__time {
  font-variant-numeric: tabular-nums;
}