@charset "UTF-8";

:root {
  --brand-primary: #DE007D;
  --brand-primary-hover: #B80068;
  --brand-secondary: #9F9F9F;
  --brand-gray: #9F9F9F;
  --brand-white: #FFFFFF;
  --brand-black: var(--brand-gray);
  --brand-surface: #FFFFFF;
  --brand-page: #FFF7FB;
  --brand-border: #E8D8E2;
  --brand-muted: var(--brand-gray);
  --brand-success: #DE007D;
  --brand-warning: #9F9F9F;
  --brand-danger: #DE007D;
  --brand-info: #9F9F9F;

  --text-heading: var(--brand-primary);
  --text-body: var(--brand-muted);
  --text-muted: var(--brand-gray);
  --background-page: var(--brand-white);
  --background-soft: var(--brand-page);
  --surface-default: var(--brand-surface);
  --surface-raised: #FFFFFF;
  --border-subtle: var(--brand-border);
  --border-strong: color-mix(in srgb, var(--brand-primary) 42%, var(--brand-border));

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgb(222 0 125 / 8%);
  --shadow-md: 0 10px 28px rgb(222 0 125 / 10%);
  --shadow-brand: 0 12px 32px rgb(222 0 125 / 16%);

  --font-family-base: "Cairo", Tahoma, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.35;
  --line-height-base: 1.8;
  --font-display: clamp(2.1rem, 4vw, 4.75rem);
  --font-h1: clamp(1.9rem, 3vw, 3.25rem);
  --font-h2: clamp(1.55rem, 2.2vw, 2.35rem);
  --font-h3: clamp(1.25rem, 1.55vw, 1.65rem);
  --font-h4: 1.1rem;
  --font-body-lg: 1.08rem;
  --font-body: 1rem;
  --font-small: .9rem;
  --font-caption: .8rem;

  --breakpoint-xs: 360px;
  --breakpoint-sm: 430px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms ease;
  --focus-ring: 0 0 0 3px rgb(222 0 125 / 22%);

  --main-color: var(--brand-primary);
  --main-color-alt: var(--brand-primary-hover);
  --Secondary-color: var(--brand-gray);
  --General-color-W: var(--brand-white);
  --General-color-W-t: rgb(255 255 255 / 25%);
  --General-color-B: var(--brand-gray);
  --dark-color: var(--brand-gray);
  --main-transition-color: rgb(204 0 102 / 50%);
  --secondary-transition-color: rgb(167 167 167 / 50%);
  --Section-Padding: 100px;
  --Section-Padding-Mobile: 60px;
  --main-box-shadow: var(--shadow-brand);
  --secondary-box-shadow: var(--shadow-sm);
  --main-radius: var(--radius-lg);
  --small-radius: var(--radius-sm);
  --large-radius: var(--radius-xl);
  --main-transition: var(--transition-base);
  --fast-transition: var(--transition-fast);
  --slow-transition: var(--transition-slow);
  --container-padding: 15px;
  --max-width: 1200px;
  --main-font: var(--font-family-base);
  --base-font-size: 16px;
  --main-line-height: var(--line-height-base);

  --admin-primary: var(--brand-primary);
  --admin-secondary: var(--brand-gray);
  --admin-white: var(--brand-white);
  --admin-font: var(--font-family-base);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms linear;
    --transition-base: 0.01ms linear;
    --transition-slow: 0.01ms linear;
  }
}