/*
 * Loadbalancer.org — Peacock Design System
 * Root entry point. Consumers link this one file.
 *
 *   <link rel="stylesheet" href="styles.css" />
 *
 * It pulls in the four self-hosted brand font families and exposes the
 * Peacock colour + gradient tokens as CSS custom properties.
 */

/* ── Fonts ───────────────────────────────────────────────────────────── */
@import './assets/fonts/roboto/roboto.css';
@import './assets/fonts/roboto-slab/roboto-slab.css';
@import './assets/fonts/roboto-mono/roboto-mono.css';
@import './assets/fonts/caveat/caveat.css';

/* ── Tokens ──────────────────────────────────────────────────────────── */
/* Full token system imported from the Peacock Figma Variables — every colour
   scale (50–950), semantic role (Global / Light / Website modes), spacing,
   radius, sizing and type token. This is the authoritative source. */
@import './tokens-import/fig-tokens.css';

:root {
  /* Brand palette */
  --color-deep-purple: #54009c;      /* brand primary */
  --color-deep-purple-shade: #43007d;
  --color-deep-purple-tint: #eee6f5;
  --color-digital-purple: #c200ff;
  --color-pink: #ff00a3;
  --color-peppermint: #0fffd3;
  --color-denim: #5c61d4;            /* secondary / link */
  --color-denim-shade: #2a2e9d;
  --color-midnight: #1b052e;

  /* Production denim scale — matches the website Tailwind build, where 1000 is
     the base (#5C61D4); 50–900 are tints toward white, 1100–1900 shades toward
     #080010. This is the scale the .lb-btn button styles reference. */
  --denim-50: #f7f7fd;  /* @kind color */
  --denim-100: #efeffb; /* @kind color */
  --denim-150: #e7e7f9; /* @kind color */
  --denim-200: #dedff6; /* @kind color */
  --denim-300: #ced0f2; /* @kind color */
  --denim-400: #bec0ee; /* @kind color */
  --denim-500: #aeb0ea; /* @kind color */
  --denim-600: #9da0e5; /* @kind color */
  --denim-700: #8d90e1; /* @kind color */
  --denim-800: #7d81dd; /* @kind color */
  --denim-900: #6c71d8; /* @kind color */
  --denim-1000: #5c61d4; /* @kind color */
  --denim-1100: #5457c0; /* @kind color */
  --denim-1200: #4b4ead; /* @kind color */
  --denim-1300: #434499; /* @kind color */
  --denim-1400: #3a3a86; /* @kind color */
  --denim-1500: #323172; /* @kind color */
  --denim-1600: #2a275e; /* @kind color */
  --denim-1700: #211d4b; /* @kind color */
  --denim-1800: #191337; /* @kind color */
  --denim-1900: #100a24; /* @kind color */

  /* Semantic */
  --surface-primary: #ffffff;
  --surface-elevated: #eee6f5;
  --surface-inverse: #212529;
  --border-primary: #eee6f5;
  --border-muted: #f1f3f5;
  --border-strong: #bb99d7;
  --text-primary: #32005e;
  --text-secondary: #11001f;
  --text-tertiary: #adb5bd;
  --text-link: #5c61d4;
  --text-link-hover: #2a2e9d;
  --text-heading: #54009c;

  /* Gradients */
  --gradient-peacock: linear-gradient(-45deg, #54009c 0%, #c200ff 33%, #ff00a3 66%, #0fffd3 100%); /* @kind color */
  --gradient-midnight-peacock: linear-gradient(-45deg, #1b052e 0%, #c200ff 33%, #ff00a3 66%, #0fffd3 100%); /* @kind color */
  --gradient-declivity-2: linear-gradient(-45deg, #ff00a3 0%, #c200ff 50%, #54009c 100%); /* @kind color */
  --gradient-kepler-51: linear-gradient(-45deg, #54009c 0%, #c200ff 100%); /* @kind color */
  --gradient-cyber-tonic: linear-gradient(-45deg, #280845 0%, #54009c 100%); /* @kind color */
  --gradient-marine: linear-gradient(-45deg, #5c61d4 0%, #00ffcf 100%); /* @kind color */
  --gradient-pink-nebula: linear-gradient(-45deg, #ff00a3 0%, #c200ff 100%); /* @kind color */
  --text-gradient: var(--gradient-declivity-2); /* @kind color */

  /* Type families */
  --font-sans: 'Roboto', system-ui, sans-serif;
  --font-display: 'Roboto Slab', Georgia, serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --font-script: 'Caveat', cursive;
}