/**
 * UPS Global Checkout - Design System Variables
 *
 * Single source of truth for all design tokens.
 * Enqueued as 'upsgc-variables' — declare it as a dependency in any
 * stylesheet that uses these tokens so WordPress loads it exactly once.
 *
 * @package UPSGC\UpsGlobalCheckoutForWoocommerce\Admin\Css
 * @since   1.1.0
 */

:root {
  /* -------------------------------------------------------------------------
   * Colors
   * ---------------------------------------------------------------------- */
  --upsgc-brand-colors-black: #121212;
  --upsgc-brand-colors-white: #ffffff;
  --upsgc-brand-colors-gold: #ffc400;

  --upsgc-on-surface-medium-emphasis: #5f5753;
  --upsgc-status-feature-on-feature-container: #097676;
  --upsgc-divider-section: #dfdbd7;
  --upsgc-action-secondary: #0662bb;
  --upsgc-surface: #f2f1ef;

  --upsgc-text-success: #196621;
  --upsgc-background-success: #dbf0db;
  --upsgc-text-error: #7f1701;
  --upsgc-background-error: #fceae6;
  --upsgc-text-warning: #806a00;
  --upsgc-background-warning: #fef6cc;
  --upsgc-text-info: #064d93;
  --upsgc-background-info: #e3eef9;
  --upsgc-background-critical: #dc3545;
  --upsgc-border-critical: #a71d2a;

  /* -------------------------------------------------------------------------
   * Typography
   * ---------------------------------------------------------------------- */
  --upsgc-font-family: "Roboto", sans-serif;

  --upsgc-font-weight-regular: 400;
  --upsgc-font-weight-medium: 500;
  --upsgc-font-weight-bold: 600;

  /* Headline */
  --upsgc-headline-regular-size: 20px;
  --upsgc-headline-regular-line-height: 32px;
  --upsgc-headline-md-size: 40px;
  --upsgc-headline-md-line-height: 48px;

  /* Title */
  --upsgc-title-lg-size: 28px;
  --upsgc-title-lg-line-height: 36px;
  --upsgc-title-md-size: 24px;
  --upsgc-title-md-line-height: 32px;

  /* Body */
  --upsgc-body-reg-size: 16px;
  --upsgc-body-reg-line-height: 24px;

  /* Header / Button */
  --upsgc-header-md-size: 16px;
  --upsgc-header-md-line-height: 24px;
  --upsgc-header-regular-size: 16px;
  --upsgc-header-regular-line-height: 24px;

  /* Label */
  --upsgc-label-sm-size: 12px;
  --upsgc-label-sm-line-height: 16px;
  --upsgc-label-md-size: 16px;
  --upsgc-label-md-line-height: 24px;
  --upsgc-label-lg-size: 20px;
  --upsgc-label-lg-line-height: 28px;

  /* -------------------------------------------------------------------------
   * Spacing
   * ---------------------------------------------------------------------- */
  --upsgc-spacing-xs: 4px;
  --upsgc-spacing-sm: 8px;
  --upsgc-spacing-md: 12px;
  --upsgc-spacing-lg: 16px;
  --upsgc-spacing-xl: 20px;
  --upsgc-spacing-2xl: 24px;
  --upsgc-spacing-3xl: 32px;
  --upsgc-spacing-4xl: 40px;
  --upsgc-spacing-5xl: 48px;

  /* -------------------------------------------------------------------------
   * Elevation / Shadow
   * ---------------------------------------------------------------------- */
  --upsgc-elevation-1-shadow:
    0px 1px 2px 0px rgba(0, 0, 0, 0.15),
    0px 1px 3px 1px rgba(0, 0, 0, 0.25);
  --upsgc-elevation-2-shadow:
    0px 2px 6px 2px rgba(0, 0, 0, 0.15),
    0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --upsgc-elevation-3-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  --upsgc-elevation-4-shadow:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px 0px rgba(0, 0, 0, 0.3);

  /* -------------------------------------------------------------------------
   * Border Radius
   * ---------------------------------------------------------------------- */
  --upsgc-border-radius-sm: 4px;
  --upsgc-border-radius-md: 32px;
  --upsgc-border-radius-lg: 36px;
}