:root {
  /*
   * Typography
   * ======================================================================== */

  --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;

  /*
   * Layout
   * ======================================================================== */

  --max-content-width: 1080px;
  --max-container-width: 100%;

  /*
   * Media queries breakpoints
   * ======================================================================== */

  --screen-xs-min: 480px;  /* Extra small screen / phone */
  --screen-sm-min: 768px;  /* Small screen / tablet */
  --screen-md-min: 992px;  /* Medium screen / desktop */
  --screen-lg-min: 1200px; /* Large screen / wide desktop */

  /*
   * Legacy app variables bridged to the design-system token contract.
   * This keeps existing CSS working while the app migrates off the old names.
   */
  --border-color: color-mix(in oklab, var(--token-color-text) 18%, white);
  --background-color: var(--token-color-surface);
  --btn-color: var(--token-color-text);
  --btn-primary-bg: var(--token-color-primary);
  --btn-primary-color: var(--token-color-surface);
  --btn-primary-hover-bg: color-mix(in oklab, var(--token-color-primary) 84%, black);
  --btn-secondary-bg: var(--token-color-secondary);
  --btn-secondary-color: var(--token-color-surface);
  --btn-secondary-hover-bg: color-mix(in oklab, var(--token-color-secondary) 84%, black);

  --text-color-main: var(--token-color-text);
  --text-color-light: color-mix(in oklab, var(--token-color-text) 72%, white);

  --link-color: var(--token-color-primary);
}