/**
 * MyAccount Design System - Base Tokens
 * CSS Variables for reusable design tokens across WooCommerce MyAccount
 * 
 * @package MyAccount Design System
 * @version 1.0
 */

:root {
  /* Typography */
  --ma-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
  --ma-font-size-xs: 12px;
  --ma-font-size-sm: 14px;
  --ma-font-size-base: 16px;
  --ma-font-size-lg: 18px;
  --ma-font-weight-normal: 400;
  --ma-font-weight-medium: 500;
  --ma-font-weight-semibold: 600;
  --ma-font-weight-bold: 700;

  /* Color Palette */
  --ma-bg-primary: #101e30;
  --ma-bg-secondary: #ffeec9;
  --ma-surface: #ffffff;
  --ma-surface-hover: #f9fafb;

  /* Borders & Dividers */
  --ma-border-color: #e5e7eb;
  --ma-border-color-light: #f3f4f6;
  --ma-border-width: 1px;

  /* Text Colors */
  --ma-text-primary: #101e30;
  --ma-text-secondary: #47586f;
  --ma-text-tertiary: #9ca3af;
  --ma-text-light: #d1d5db;
  --ma-text-inverse: #ffffff;

  /* Semantic Colors */
  --ma-primary: #111827;
  --ma-primary-hover: #1f2937;
  --ma-accent: #002065;
  --ma-accent-hover: #00185a;
  --ma-accent-light: #dbeafe;

  --ma-success: #10b981;
  --ma-success-light: #d1fae5;
  --ma-warning: #f59e0b;
  --ma-warning-light: #fef3c7;
  --ma-danger: #ef4444;
  --ma-danger-light: #fee2e2;
  --ma-info: #0ea5e9;
  --ma-info-light: #cffafe;

  /* Shadows */
  --ma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ma-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --ma-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Spacing Scale */
  --ma-spacing-xs: 4px;
  --ma-spacing-sm: 8px;
  --ma-spacing-md: 16px;
  --ma-spacing-lg: 24px;
  --ma-spacing-xl: 32px;
  --ma-spacing-2xl: 48px;

  /* Border Radius */
  --ma-radius-sm: 4px;
  --ma-radius-md: 8px;
  --ma-radius-lg: 12px;
  --ma-radius-xl: 16px;
  --ma-radius-full: 9999px;

  /* Transitions */
  --ma-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ma-transition-fast: all 0.15s ease-out;
  --ma-transition-slow: all 0.3s ease-in-out;

  /* Z-index Scale */
  --ma-z-dropdown: 100;
  --ma-z-modal: 1000;

  /* Order Details */
  --ma-order-highlight-bg: #fef3c7;
  --ma-order-highlight-color: #92400e;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
}

html, body {
  font-family: var(--ma-font-family);
  color: var(--ma-text-primary);
  background-color: var(--ma-bg-primary);
}

/* Utility Classes */
.ma-text-muted {
  color: var(--ma-text-secondary);
}

.ma-text-light {
  color: var(--ma-text-tertiary);
}

.ma-bg-surface {
  background-color: var(--ma-surface);
}

.ma-border {
  border: var(--ma-border-width) solid var(--ma-border-color);
}

.ma-shadow {
  box-shadow: var(--ma-shadow-md);
}

.ma-rounded {
  border-radius: var(--ma-radius-lg);
}

.ma-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== RTL SUPPORT ========== */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] * {
  --direction-left: right;
  --direction-right: left;
}