/*
 * @ampeco/design-tokens - CSS Custom Properties
 *
 * These variables are set programmatically by applyTheme() at runtime.
 * The :root defaults below match the light theme so the page has
 * sensible values even before JavaScript initialises.
 */

:root {
  /* ─── Buttons ─────────────────────────────────────────────── */
  --btn-primary-bg: #00A573;
  --btn-primary-text: #FFFFFF;
  --btn-primary-pressed: #D7E4DC;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: #00A573;
  --btn-secondary-text: #000000;

  /* ─── Surfaces ────────────────────────────────────────────── */
  --surface-bg: #FFFFFF;
  --surface-elevation-1: #EEF2EF;
  --surface-elevation-2: #D7E4DC;

  /* ─── Text ────────────────────────────────────────────────── */
  --text-base: #000000;
  --text-support: #808080;
  --text-placeholder: #808080;

  /* ─── Feedback ────────────────────────────────────────────── */
  --feedback-success: #24A629;
  --feedback-success-subtle: #BDE4BF;
  --feedback-error: #FF6868;
  --feedback-error-subtle: #FFD2D2;
  --feedback-warning: #FFB23E;
  --feedback-warning-subtle: #FFE8C5;
  --feedback-info: #2F83FF;
  --feedback-info-subtle: #C1DAFF;

  /* ─── Input ───────────────────────────────────────────────── */
  --input-fill: #EEF2EF;
  --input-border: #D7E4DC;
  --input-border-active: #C8DAD7;
  --input-text: #000000;
  --input-placeholder: #808080;

  /* ─── Separator ───────────────────────────────────────────── */
  --separator: #C8DAD7;

  /* ─── Booking Status ──────────────────────────────────────── */
  --status-accepted: #2F83FF;
  --status-reserved: #24A629;
  --status-completed: #808080;
  --status-cancelled: #FFB23E;
  --status-no-show: #FF6868;
  --status-failed: #B71C1C;

  /* ─── Spacing Scale ───────────────────────────────────────── */
  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 6px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 64px;

  /* ─── Border Radius ───────────────────────────────────────── */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 32px;

  /* ─── Typography ──────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* H1 - Semibold 22/26 */
  --font-h1-size: 22px;
  --font-h1-line-height: 26px;
  --font-h1-weight: 600;

  /* H2 - Semibold 18/22 */
  --font-h2-size: 18px;
  --font-h2-line-height: 22px;
  --font-h2-weight: 600;

  /* H3 - Medium 16/20 */
  --font-h3-size: 16px;
  --font-h3-line-height: 20px;
  --font-h3-weight: 500;

  /* H4 - Medium 14/17 */
  --font-h4-size: 14px;
  --font-h4-line-height: 17px;
  --font-h4-weight: 500;

  /* Body Large - Regular 16/20 */
  --font-body-large-size: 16px;
  --font-body-large-line-height: 20px;
  --font-body-large-weight: 400;

  /* Body Medium - Regular 14/17 */
  --font-body-medium-size: 14px;
  --font-body-medium-line-height: 17px;
  --font-body-medium-weight: 400;

  /* Body Large Heavy - Semibold 16/20 */
  --font-body-large-heavy-size: 16px;
  --font-body-large-heavy-line-height: 20px;
  --font-body-large-heavy-weight: 600;

  /* Body Medium Heavy - Semibold 14/17 */
  --font-body-medium-heavy-size: 14px;
  --font-body-medium-heavy-line-height: 17px;
  --font-body-medium-heavy-weight: 600;

  /* Buttons - Semibold 14/20 */
  --font-button-size: 14px;
  --font-button-line-height: 20px;
  --font-button-weight: 600;

  /* Buttons Small - Bold 12/17 */
  --font-button-small-size: 12px;
  --font-button-small-line-height: 17px;
  --font-button-small-weight: 700;

  /* Label - Regular 12/15 */
  --font-label-size: 12px;
  --font-label-line-height: 15px;
  --font-label-weight: 400;

  /* Caption - Medium 12/15 */
  --font-caption-size: 12px;
  --font-caption-line-height: 15px;
  --font-caption-weight: 500;

  /* ─── Component Sizes ─────────────────────────────────────── */
  --size-xs: 14px;
  --size-s: 20px;
  --size-m: 32px;
  --size-l: 44px;
}