/* Site developed and built by sitethreesixty.com */
/* https://www.sitethreesixty.com */

/* ==========================================================================
   COLOR TOKENS
   All colour variables for this site. Customise these values per client.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     PRIMARY BRAND COLOUR
     -------------------------------------------------------------------------- */

  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;  /* Main primary */
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* --------------------------------------------------------------------------
     NEUTRAL COLOURS
     -------------------------------------------------------------------------- */

  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;

  /* --------------------------------------------------------------------------
     SEMANTIC COLOURS
     -------------------------------------------------------------------------- */

  --color-success: #22c55e;
  --color-success-light: #dcfce7;
  --color-success-dark: #166534;

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #92400e;

  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #991b1b;

  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1e40af;

  /* --------------------------------------------------------------------------
     APPLIED COLOURS (Semantic Mappings)
     These are what components should reference, not raw colour values.
     -------------------------------------------------------------------------- */

  /* Backgrounds */
  --bg-page: var(--color-neutral-50);
  --bg-surface: #ffffff;
  --bg-surface-alt: var(--color-neutral-100);
  --bg-surface-elevated: #ffffff;

  /* Text */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-muted: var(--color-neutral-400);
  --text-inverse: #ffffff;

  /* Borders */
  --border-color: var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);

  /* Interactive */
  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);
  --color-focus: var(--color-primary-500);
}

/* Site developed and built by sitethreesixty.com */
/* https://www.sitethreesixty.com */