/**
 * Afoomart Design System Tokens
 * Complete Semantic Color System, Typography, Spacing, Elevation, Radii & Transitions
 */

:root {
  /* ==================================================
     1. Raw Brand Palette
     ================================================== */
  --raw-primary-navy: #113F6D;
  --raw-deep-navy: #082A4D;
  --raw-primary-red: #DE2C27;
  --raw-bright-red: #EF3832;
  --raw-bg-light: #F1F3F7;
  --raw-white: #FFFFFF;
  --raw-text-dark: #202124;
  --raw-text-secondary: #6B7280;
  --raw-text-muted: #9CA3AF;
  --raw-border: #E5E7EB;
  --raw-border-light: #EEF0F3;
  --raw-success: #16803C;
  --raw-warning: #F59E0B;
  --raw-error: #DC2626;
  --raw-info: #2563EB;

  /* ==================================================
     2. Semantic Color System
     ================================================== */
  /* Primary Brand (Navy) */
  --color-primary: var(--raw-primary-navy);
  --color-primary-dark: var(--raw-deep-navy);
  --color-primary-light: #1A548E;
  --color-primary-hover: #0D3359;
  --color-primary-active: #082A4D;
  --color-primary-tint: #EEF4FA;
  --color-primary-rgb: 17, 63, 109;

  /* Accent Brand (Red - CTAs, Discounts, Alerts) */
  --color-accent: var(--raw-primary-red);
  --color-accent-dark: #B91C18;
  --color-accent-light: var(--raw-bright-red);
  --color-accent-hover: #C5221E;
  --color-accent-active: #9E1714;
  --color-accent-tint: #FEF2F2;
  --color-accent-rgb: 222, 44, 39;

  /* Surfaces & Backgrounds */
  --color-background: var(--raw-bg-light);
  --color-surface: var(--raw-white);
  --color-surface-muted: #F8FAFC;
  --color-surface-elevated: var(--raw-white);
  --color-surface-dark: var(--raw-deep-navy);
  --color-overlay: rgba(8, 42, 77, 0.65);
  --color-backdrop: rgba(0, 0, 0, 0.5);

  /* Typography / Text Colors */
  --color-text: var(--raw-text-dark);
  --color-text-secondary: var(--raw-text-secondary);
  --color-text-muted: var(--raw-text-muted);
  --color-text-inverse: var(--raw-white);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.75);
  --color-text-link: var(--raw-primary-navy);
  --color-text-link-hover: var(--raw-primary-red);

  /* Borders & Dividers */
  --color-border: var(--raw-border);
  --color-border-light: var(--raw-border-light);
  --color-border-hover: #D1D5DB;
  --color-border-strong: #9CA3AF;
  --color-divider: #E5E7EB;

  /* Feedback / Status Colors */
  --color-success: var(--raw-success);
  --color-success-bg: #DCFCE7;
  --color-success-border: #86EFAC;
  --color-success-text: #14532D;

  --color-warning: var(--raw-warning);
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FCD34D;
  --color-warning-text: #78350F;

  --color-error: var(--raw-error);
  --color-error-bg: #FEE2E2;
  --color-error-border: #FCA5A5;
  --color-error-text: #7F1D1D;

  --color-info: var(--raw-info);
  --color-info-bg: #EFF6FF;
  --color-info-border: #93C5FD;
  --color-info-text: #1E3A8A;

  /* Marketplace Specific Accents */
  --color-badge-official: var(--raw-deep-navy);
  --color-badge-express: var(--raw-primary-red);
  --color-star-filled: #F59E0B;
  --color-star-empty: #E5E7EB;
  --color-discount-badge-bg: #FEE2E2;
  --color-discount-badge-text: #DE2C27;
  --color-flash-sale: #DE2C27;
  --color-verified-badge: #0284C7;

  /* Focus & Active Highlights */
  --focus-ring: 0 0 0 3px rgba(17, 63, 109, 0.22);
  --focus-ring-accent: 0 0 0 3px rgba(222, 44, 39, 0.22);
  --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.22);

  /* Backward Compatibility Aliases */
  --af-color-primary-navy: var(--color-primary);
  --af-color-deep-navy: var(--color-primary-dark);
  --af-color-primary-red: var(--color-accent);
  --af-color-bright-red: var(--color-accent-light);
  --af-color-bg: var(--color-background);
  --af-color-white: var(--color-surface);
  --af-color-dark-text: var(--color-text);
  --af-color-secondary-text: var(--color-text-secondary);
  --af-color-border: var(--color-border);
  --af-color-border-light: var(--color-border-light);
  --af-color-success: var(--color-success);
  --af-color-warning: var(--color-warning);
  --af-color-discount-bg: var(--color-discount-badge-bg);
  --af-color-discount-text: var(--color-discount-badge-text);
  --af-color-star: var(--color-star-filled);

  /* ==================================================
     3. Spacing Scale (4px to 96px)
     ================================================== */
  --space-0: 0;
  --space-1: 4px;   /* 0.25rem */
  --space-2: 8px;   /* 0.5rem */
  --space-3: 12px;  /* 0.75rem */
  --space-4: 16px;  /* 1rem */
  --space-5: 20px;  /* 1.25rem */
  --space-6: 24px;  /* 1.5rem */
  --space-7: 32px;  /* 2rem */
  --space-8: 40px;  /* 2.5rem */
  --space-9: 48px;  /* 3rem */
  --space-10: 64px; /* 4rem */
  --space-11: 80px; /* 5rem */
  --space-12: 96px; /* 6rem */

  /* Spacing Aliases */
  --af-space-0: var(--space-0);
  --af-space-1: var(--space-1);
  --af-space-2: var(--space-2);
  --af-space-3: var(--space-3);
  --af-space-4: var(--space-4);
  --af-space-5: var(--space-5);
  --af-space-6: var(--space-6);
  --af-space-8: var(--space-7);
  --af-space-10: var(--space-8);
  --af-space-12: var(--space-9);
  --af-space-16: var(--space-10);

  /* ==================================================
     4. Typography Scale
     ================================================== */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Font Sizes */
  --font-size-display: 2.75rem;    /* 44px */
  --font-size-h1: 2rem;            /* 32px */
  --font-size-h2: 1.5rem;          /* 24px */
  --font-size-h3: 1.25rem;         /* 20px */
  --font-size-h4: 1rem;            /* 16px */
  --font-size-h5: 0.875rem;        /* 14px */
  --font-size-body-large: 1rem;     /* 16px */
  --font-size-body: 0.875rem;       /* 14px */
  --font-size-body-small: 0.8125rem;/* 13px */
  --font-size-caption: 0.75rem;     /* 12px */
  --font-size-label: 0.8125rem;    /* 13px */
  --font-size-overline: 0.6875rem; /* 11px */
  --font-size-price: 1.125rem;      /* 18px */
  --font-size-price-large: 1.5rem;  /* 24px */

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Typography Aliases */
  --af-font-sans: var(--font-family-sans);
  --af-font-heading: var(--font-family-heading);
  --af-text-xs: var(--font-size-caption);
  --af-text-sm: var(--font-size-body-small);
  --af-text-base: var(--font-size-body);
  --af-text-md: var(--font-size-body-large);
  --af-text-lg: var(--font-size-h3);
  --af-text-xl: var(--font-size-h2);
  --af-text-2xl: var(--font-size-h1);
  --af-text-3xl: var(--font-size-display);

  /* ==================================================
     5. Container System
     ================================================== */
  --container-max: 1400px;
  --container-wide: 1440px;
  --container-standard: 1280px;
  --container-narrow: 980px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 24px;
  --container-padding-desktop: 28px;

  --af-container-max: var(--container-max);
  --af-container-wide: var(--container-wide);
  --af-container-narrow: var(--container-narrow);

  /* Component Heights */
  --header-topbar-height: 36px;
  --header-main-height: 72px;
  --header-nav-height: 44px;
  --mobile-nav-height: 56px;
  --mobile-bottom-bar-height: 58px;

  /* ==================================================
     6. Border Radius System (Restrained, not bubbly)
     ================================================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  --af-radius-none: var(--radius-none);
  --af-radius-sm: var(--radius-sm);
  --af-radius-md: var(--radius-md);
  --af-radius-base: var(--radius-md);
  --af-radius-lg: var(--radius-lg);
  --af-radius-pill: var(--radius-pill);

  /* ==================================================
     7. Elevation / Shadow System (Subtle, professional)
     ================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 18px -2px rgba(17, 63, 109, 0.12), 0 3px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);

  --af-shadow-xs: var(--shadow-xs);
  --af-shadow-sm: var(--shadow-sm);
  --af-shadow-md: var(--shadow-md);
  --af-shadow-lg: var(--shadow-lg);
  --af-shadow-hover: var(--shadow-hover);

  /* ==================================================
     8. Transitions & Animation Tokens (150ms - 250ms)
     ================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  --af-transition-fast: var(--transition-fast);
  --af-transition-base: var(--transition-base);
  --af-transition-smooth: var(--transition-slow);

  /* ==================================================
     9. Z-Index Layers
     ================================================== */
  --z-under: -1;
  --z-base: 1;
  --z-badge: 10;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-offcanvas-backdrop: 1040;
  --z-offcanvas: 1045;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-toast: 1060;
  --z-tooltip: 1070;

  --af-z-dropdown: var(--z-dropdown);
  --af-z-sticky: var(--z-sticky);
  --af-z-fixed: var(--z-fixed);
  --af-z-offcanvas-backdrop: var(--z-offcanvas-backdrop);
  --af-z-offcanvas: var(--z-offcanvas);
  --af-z-modal-backdrop: var(--z-modal-backdrop);
  --af-z-modal: var(--z-modal);
  --af-z-toast: var(--z-toast);
}