/**
 * Platform Design Tokens - Single Source of Truth (SSOT)
 * 
 * ⚠️ IMPORTANT: This is the ONLY file where hex color values are allowed.
 * All other CSS files must reference these variables.
 * 
 * Purpose:
 * - Centralized design system tokens
 * - WordPress standard color palette
 * - RTL-friendly spacing and logical properties
 * - WCAG AA compliant state colors
 * 
 * This file should be enqueued FIRST before all other platform CSS
 * to ensure variables are available throughout the cascade.
 * 
 * @package Astra-Child
 * @version 2.0.0
 */

:root {
  /* ==========================================================================
     STATE COLORS - WordPress Standard Palette
     ========================================================================== */

  /**
   * Error Color - WordPress Standard (#d63638)
   * WCAG AA Compliance: 4.5:1 contrast ratio on white background
   * Usage: Validation errors, destructive actions, critical alerts
   */
  --color-error: #d63638;

  /**
   * Success Color - WordPress Standard (#00a32a)
   * WCAG AA Compliance: 4.5:1 contrast ratio on white background
   * Usage: Success messages, confirmations, completed states
   */
  --color-success: #00a32a;

  /**
   * Warning Color - WordPress Standard (#dba617)
   * WCAG AA Compliance: 4.5:1 contrast ratio on white background
   * Usage: Warning messages, caution states, important notices
   */
  --color-warning: #dba617;

  /**
   * Info Color - WordPress Standard (#2271b1)
   * WCAG AA Compliance: 4.5:1 contrast ratio on white background
   * Usage: Informational messages, help text, neutral notifications
   */
  --color-info: #2271b1;

  /* ==========================================================================
     PLATFORM CORE COLORS
     ========================================================================== */

  --platform-bg: #f7f7fb; /* Page background */
  --platform-card: #ffffff; /* Card/container background */
  --platform-border: #e6e6ef; /* Default border color */
  --platform-text: #111827; /* Primary text color */
  --platform-muted: #6b7280; /* Secondary/muted text */
  --platform-accent: #2563eb; /* Primary accent/link color */

  /* Legacy aliases (for backward compatibility - deprecated, use --color-* instead) */
  --platform-ok: var(--color-success);
  --platform-warn: var(--color-warning);
  --platform-err: var(--color-error);

  /* ==========================================================================
     EXTENDED COLOR PALETTE (Common WordPress/Platform Colors)
     ========================================================================== */

  /* Grayscale */
  --color-white: #ffffff;
  --color-gray-50: #f7f7fb;
  --color-gray-100: #f0f0f0;
  --color-gray-200: #e6e6ef;
  --color-gray-300: #ddd;
  --color-gray-400: #ccc;
  --color-gray-500: #999;
  --color-gray-600: #666;
  --color-gray-700: #555;
  --color-gray-800: #333;
  --color-gray-900: #23282d;
  --color-black: #1d2327;

  /* WordPress Admin Colors */
  --color-wp-blue: #0073aa;
  --color-wp-blue-dark: #005a87;
  --color-wp-gray-light: #e0e0e0;
  --color-wp-gray: #ccd0d4;
  --color-wp-text: #1d2327;

  /* Extended State Colors */
  --color-success-light: #dff0d8;
  --color-success-green: #5cb85c;
  --color-success-dark: #3c763d;
  --color-success-bg: #46b450;

  --color-warning-light: #fcf8e3;
  --color-warning-yellow: #e5b20f;
  --color-warning-dark: #8a6d3b;
  --color-warning-bg: #ffb900;

  --color-error-light: #ebccd1;
  --color-error-red: #a94442;
  --color-error-dark: #dc3232;

  /* Info/Accent Colors */
  --color-info-light: #e3f2fd;
  --color-info-lighter: #bfdbfe;
  --color-info-sky: #acf;
  --color-info-bg-light: #f0f6fc;
  --color-info-bg-lighter: #f0f8ff;
  --color-info-bg-sky: #eff6ff;
  --color-accent-blue: #2563eb;
  --color-material-blue: #2196f3;

  /* Additional Background Variants */
  --color-bg-gray-light: #f7f7f7;
  --color-bg-gray-lighter: #fafafa;
  --color-bg-gray-lightest: #f9f9f9;
  --color-bg-gray-100: #f5f5f5;
  --color-bg-gray-border: #f3f3f3;

  --color-warning-bg-light: #fef7f1;
  --color-warning-border: #fde68a;
  --color-warning-accent: #f9c017;
  --color-warning-orange: #f0ad4e;

  --color-error-bg-light: #f2dede;
  --color-error-border: #fecaca;
  --color-error-bg-lighter: #fef2f2;

  /* ==========================================================================
     SPACING SCALE - 4px Base Unit (0.25rem)
     RTL NOTE: Use logical properties (margin-inline, padding-block, etc.)
     ========================================================================== */

  /**
   * Spacing Scale Guide:
   * --space-1: 4px   - Tiny gaps, icon padding
   * --space-2: 8px   - Small gaps between inline elements
   * --space-3: 12px  - Medium gaps, button padding
   * --space-4: 16px  - Standard gaps, field padding
   * --space-5: 20px  - Large gaps, section padding
   * --space-6: 24px  - Extra large gaps, container padding
   * 
   * RTL-Friendly Usage Examples:
   * ✅ margin-inline-start: var(--space-4);  (instead of margin-left)
   * ✅ margin-inline-end: var(--space-4);    (instead of margin-right)
   * ✅ padding-inline: var(--space-4);       (instead of padding-left/right)
   * ✅ padding-block: var(--space-3);        (instead of padding-top/bottom)
   * ✅ inset-inline-start: var(--space-2);   (instead of left)
   * ✅ inset-inline-end: var(--space-2);     (instead of right)
   */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */

  /* Legacy aliases (for backward compatibility - deprecated, use --space-* instead) */
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

  --radius-sm: 4px; /* Small - buttons, tags, badges */
  --radius-md: 6px; /* Medium - inputs, small cards */
  --radius-lg: 12px; /* Large - cards, modals, containers */

  /* Legacy aliases (for backward compatibility) */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle - hover states, dropdowns */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Default - cards, elevated elements */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Strong - modals, popovers */

  /* Legacy aliases (for backward compatibility) */
  --shadow-1: var(--shadow-md);
  --shadow-2: var(--shadow-lg);

  /* ==========================================================================
     FIELD STATE COLORS
     ========================================================================== */

  /**
   * Field Error State
   * Applied to: input borders and backgrounds when validation fails
   */
  --field-border-error: var(--color-error);
  --field-bg-error: #fee; /* Light red background for error fields */

  /**
   * Field Success State
   * Applied to: input borders and backgrounds when validation succeeds
   */
  --field-border-success: var(--color-success);
  --field-bg-success: #edf7ed; /* Light green background for success fields */

  /**
   * Field Warning State
   * Applied to: input borders and backgrounds for warning states
   */
  --field-border-warning: var(--color-warning);
  --field-bg-warning: #fcf3db; /* Light yellow background for warning fields */

  /**
   * Field Info State
   * Applied to: input borders and backgrounds for info states
   */
  --field-border-info: var(--color-info);
  --field-bg-info: #e5f5fa; /* Light blue background for info fields */

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-fast: all 0.15s ease-in-out; /* Quick interactions */
  --transition-default: all 0.2s ease-in-out; /* Standard transitions */
  --transition-slow: all 0.3s ease-in-out; /* Smooth, deliberate animations */
}

/**
 * RTL (Right-to-Left) Support Guidelines
 * ======================================
 * 
 * When using these tokens in your CSS, always use logical properties for
 * directional values to ensure proper RTL support:
 * 
 * SPACING (Margins & Padding):
 * ❌ DON'T: margin-left: var(--space-4);
 * ✅ DO:    margin-inline-start: var(--space-4);
 * 
 * ❌ DON'T: margin-right: var(--space-4);
 * ✅ DO:    margin-inline-end: var(--space-4);
 * 
 * ❌ DON'T: padding-left: var(--space-3);
 * ✅ DO:    padding-inline-start: var(--space-3);
 * 
 * ❌ DON'T: padding: 0 var(--space-4);
 * ✅ DO:    padding-inline: var(--space-4);
 *          padding-block: 0;
 * 
 * POSITIONING:
 * ❌ DON'T: left: var(--space-2);
 * ✅ DO:    inset-inline-start: var(--space-2);
 * 
 * ❌ DON'T: right: var(--space-2);
 * ✅ DO:    inset-inline-end: var(--space-2);
 * 
 * BORDERS:
 * ❌ DON'T: border-left: 1px solid var(--color-error);
 * ✅ DO:    border-inline-start: 1px solid var(--color-error);
 * 
 * ❌ DON'T: border-right: 4px solid var(--color-error);
 * ✅ DO:    border-inline-end: 4px solid var(--color-error);
 * 
 * TEXT ALIGNMENT:
 * ❌ DON'T: text-align: left;
 * ✅ DO:    text-align: start;
 * 
 * ❌ DON'T: text-align: right;
 * ✅ DO:    text-align: end;
 * 
 * FLOAT & CLEAR:
 * ❌ DON'T: float: left;
 * ✅ DO:    float: inline-start;
 * 
 * ❌ DON'T: clear: right;
 * ✅ DO:    clear: inline-end;
 * 
 * For more information:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
 */

/* Added for admin fallbacks */
:root {
  --color-error-bg: #fee;
  --color-error-50: #fef2f2;
}