/*
  CodeX Media — design tokens.
  Single source of truth for color, type, spacing, radius and shadow values.
  Every component stylesheet must consume these variables instead of
  hardcoding raw values, so the visual identity stays consistent.
*/

:root {
  /* Colors */
  --cx-background: #F8F9FC;
  --cx-surface: #FFFFFF;
  --cx-primary: #356DFF;
  --cx-primary-hover: #285CE6;
  --cx-soft-blue: #4F7DFF;
  --cx-soft-violet: #8A5CFF;
  --cx-purple: #6D42FF;
  --cx-lavender: #F2EEFF;
  --cx-text: #101114;
  --cx-secondary-text: #555555;
  --cx-text-muted: #7B7F87;
  --cx-border: #E8EAF1;
  --cx-divider: #EEF2F7;
  --cx-gold: #C9A15A;

  --cx-success: #16A34A;
  --cx-danger: #DC2626;
  --cx-warning: #F59E0B;

  /* Gradients */
  --cx-gradient-primary: linear-gradient(135deg, var(--cx-soft-blue) 0%, var(--cx-soft-violet) 100%);
  --cx-gradient-lavender: linear-gradient(180deg, var(--cx-lavender) 0%, var(--cx-surface) 100%);

  /* Typography */
  --cx-font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cx-font-ar: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;

  --cx-fs-xs: 0.8125rem;
  --cx-fs-sm: 0.9375rem;
  --cx-fs-base: 1rem;
  --cx-fs-md: 1.125rem;
  --cx-fs-lg: 1.375rem;
  --cx-fs-xl: 1.75rem;
  --cx-fs-2xl: 2.25rem;
  --cx-fs-3xl: 3rem;
  --cx-fs-hero-xl: 4rem;

  --cx-lh-tight: 1.2;
  --cx-lh-normal: 1.6;
  --cx-lh-relaxed: 1.8;

  /* Spacing scale — 8px methodology, named by px value */
  --cx-space-4: 0.25rem;
  --cx-space-8: 0.5rem;
  --cx-space-12: 0.75rem;
  --cx-space-16: 1rem;
  --cx-space-20: 1.25rem;
  --cx-space-24: 1.5rem;
  --cx-space-32: 2rem;
  --cx-space-40: 2.5rem;
  --cx-space-48: 3rem;
  --cx-space-64: 4rem;
  --cx-space-80: 5rem;
  --cx-space-96: 6rem;
  --cx-space-120: 7.5rem;

  /* Radius */
  --cx-radius-sm: 12px;
  --cx-radius-md: 18px;
  --cx-radius-lg: 24px;
  --cx-radius-xl: 32px;
  --cx-radius-pill: 999px;

  /* Shadows — soft, premium, never harsh */
  --cx-shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.04), 0 1px 1px rgba(16, 17, 20, 0.03);
  --cx-shadow-md: 0 8px 24px rgba(53, 109, 255, 0.08), 0 2px 8px rgba(16, 17, 20, 0.04);
  --cx-shadow-lg: 0 16px 48px rgba(53, 109, 255, 0.12), 0 4px 16px rgba(16, 17, 20, 0.05);
  --cx-shadow-dialog: 0 24px 64px rgba(16, 17, 20, 0.16), 0 8px 24px rgba(16, 17, 20, 0.08);

  /* Glass */
  --cx-glass-bg: rgba(255, 255, 255, 0.72);
  --cx-glass-border: rgba(255, 255, 255, 0.5);
  --cx-glass-blur: 16px;

  /* Motion */
  --cx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cx-duration-fast: 150ms;
  --cx-duration-base: 250ms;

  /* Opacity scale */
  --cx-opacity-disabled: 0.45;
  --cx-opacity-muted: 0.64;
  --cx-opacity-hover-overlay: 0.08;

  /* Z-index scale */
  --cx-z-dropdown: 100;
  --cx-z-sticky: 200;
  --cx-z-header: 300;
  --cx-z-overlay: 400;
  --cx-z-modal: 500;
  --cx-z-toast: 600;

  /* Layout */
  --cx-container-max: 1280px;
  --cx-header-height: 76px;
  --cx-touch-target: 44px;

  /*
    Breakpoints — reference only, CSS custom properties cannot drive
    @media queries. Mirror these literal values in every media query:
    320, 360, 390, 430, 768, 1024, 1280, 1440
  */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cx-duration-fast: 0ms;
    --cx-duration-base: 0ms;
  }
}