/**
 * SCSS Variables
 *
 * Global variables for the admin app
 *
 * @package Everyone_Accessibility_Suite
 */

// Colors
$primary-color: #2271b1;
$primary-hover: #135e96;
$secondary-color: #646970;
$success-color: #00a32a;
$error-color: #d63638;
$warning-color: #dba617;

// Lighter, lime-leaning green used for the "passed" arc of a score ring.
// $success-color is WP's own green and stays the colour for status text and
// badges; on a thick ring it reads heavy, so the ring gets its own token.
$success-light: #8bc34a;

// Background colors
$bg-primary: #ffffff;
$bg-secondary: #f0f0f1;
$bg-tertiary: #f6f7f7;

// Text colors
$text-primary: #1d2327;
$text-secondary: #646970;
$text-tertiary: #787c82;

// Border colors
$border-color: #c3c4c7;
$border-light: #dcdcde;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// Typography
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font-size-xs: 11px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;

// Transitions
$transition-fast: 0.15s ease;
$transition-base: 0.3s ease;

// Border radius
$border-radius-sm: 2px;
$border-radius-base: 4px;
$border-radius-lg: 8px;

// Shadows
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-base: 0 2px 8px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

// Dashboard cards
$card-radius: 12px;
$card-border: #e5e7eb;
// Canvas the cards sit on - lighter than WordPress' own #f0f0f1 so the white
// cards and their hairline borders stay legible against it.
$app-bg: #f7f9fb;
$card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
$grid-gap: 20px;