/* AirKit Design System - Color Palette */
/* Adapted for PayLoadz WordPress Theme */

/* CSS Custom Properties for Colors */
:root {
  /* Shades */
  --color-shade-01: #FFFFFF;
  --color-shade-02: #222222;
  --color-shade-02-05: rgba(34, 34, 34, 0.05);
  --color-shade-02-30: rgba(34, 34, 34, 0.3);

  /* Primary Colors */
  --color-primary-01: #F6475F;
  --color-primary-02: #FF385C;

  /* Neutral Colors */
  --color-neutral-01: #FFFFFF;
  --color-neutral-02: #EBEBEB;
  --color-neutral-03: #DDDDDD;
  --color-neutral-04: #D3D3D3;
  --color-neutral-05: #C2C2C2;
  --color-neutral-06: #B0B0B0;
  --color-neutral-07: #717171;
  --color-neutral-08: #5E5E5E;

  /* Accent Colors */
  --color-accent-01: #F6D7DF;
  --color-accent-02: #D03660;

  /* Error Colors */
  --color-error-01: #FEF8F6;
  --color-error-02: #C13515;

  /* Utility Colors */
  --color-link: #004CC4;
  --color-discount: #008A05;
  --color-success: #008A05;
  --color-success-02: #34C759;
  --color-warning: #FFB400;
  --color-warning-02: #FF8A00;

  /* Gradients */
  --gradient-01: radial-gradient(circle at 99% 0%, rgba(235, 76, 96, 1) 0%, rgba(235, 76, 96, 1) 48%, rgba(235, 76, 96, 1) 100%);
  --gradient-02: radial-gradient(circle at -4% 100%, rgba(211, 55, 83, 1) 0%, rgba(209, 54, 96, 1) 53%, rgba(199, 45, 101, 1) 100%);
  --gradient-03: radial-gradient(circle at 99% 0%, rgba(199, 45, 101, 1) 0%, rgba(210, 55, 96, 1) 48%, rgba(210, 55, 85, 1) 100%);
}

/* Color Utility Classes */
/* Shades */
.color-shade-01 { color: var(--color-shade-01); }
.bg-shade-01 { background-color: var(--color-shade-01); }
.color-shade-02 { color: var(--color-shade-02); }
.bg-shade-02 { background-color: var(--color-shade-02); }
.bg-shade-02-05 { background-color: var(--color-shade-02-05); }
.bg-shade-02-30 { background-color: var(--color-shade-02-30); }

/* Primary Colors */
.color-primary-01 { color: var(--color-primary-01); }
.bg-primary-01 { background-color: var(--color-primary-01); }
.color-primary-02 { color: var(--color-primary-02); }
.bg-primary-02 { background-color: var(--color-primary-02); }

/* Neutral Colors */
.color-neutral-01 { color: var(--color-neutral-01); }
.bg-neutral-01 { background-color: var(--color-neutral-01); }
.color-neutral-02 { color: var(--color-neutral-02); }
.bg-neutral-02 { background-color: var(--color-neutral-02); }
.color-neutral-03 { color: var(--color-neutral-03); }
.bg-neutral-03 { background-color: var(--color-neutral-03); }
.color-neutral-04 { color: var(--color-neutral-04); }
.bg-neutral-04 { background-color: var(--color-neutral-04); }
.color-neutral-05 { color: var(--color-neutral-05); }
.bg-neutral-05 { background-color: var(--color-neutral-05); }
.color-neutral-06 { color: var(--color-neutral-06); }
.bg-neutral-06 { background-color: var(--color-neutral-06); }
.color-neutral-07 { color: var(--color-neutral-07); }
.bg-neutral-07 { background-color: var(--color-neutral-07); }
.color-neutral-08 { color: var(--color-neutral-08); }
.bg-neutral-08 { background-color: var(--color-neutral-08); }

/* Accent Colors */
.color-accent-01 { color: var(--color-accent-01); }
.bg-accent-01 { background-color: var(--color-accent-01); }
.color-accent-02 { color: var(--color-accent-02); }
.bg-accent-02 { background-color: var(--color-accent-02); }

/* Error Colors */
.color-error-01 { color: var(--color-error-01); }
.bg-error-01 { background-color: var(--color-error-01); }
.color-error-02 { color: var(--color-error-02); }
.bg-error-02 { background-color: var(--color-error-02); }

/* Utility Colors */
.color-link { color: var(--color-link); }
.bg-link { background-color: var(--color-link); }
.color-discount { color: var(--color-discount); }
.bg-discount { background-color: var(--color-discount); }
.color-success { color: var(--color-success); }
.bg-success { background-color: var(--color-success); }
.color-success-02 { color: var(--color-success-02); }
.bg-success-02 { background-color: var(--color-success-02); }
.color-warning { color: var(--color-warning); }
.bg-warning { background-color: var(--color-warning); }
.color-warning-02 { color: var(--color-warning-02); }
.bg-warning-02 { background-color: var(--color-warning-02); }

/* Gradient Classes */
.bg-gradient-01 { background: var(--gradient-01); }
.bg-gradient-02 { background: var(--gradient-02); }
.bg-gradient-03 { background: var(--gradient-03); }

/* Border Utility Classes */
.border-neutral-03 { border-color: var(--color-neutral-03); }
.border-shade-02 { border-color: var(--color-shade-02); }