/* =====================================================================
   Pug IT Solution — design tokens
   ---------------------------------------------------------------------
   The custom properties every other stylesheet draws from, so a change
   here applies to the public website and the admin panel alike: both
   link this file first.

   The palette is black and gold: a warm near-black for every surface, a
   single metallic gold for emphasis and a cool platinum as the quiet second
   voice. Colour is used sparingly on purpose — the pages should read as
   engineering, not as a token launch.
   ===================================================================== */
:root {
  /* Surfaces — near-black, very slightly warm */
  --bg: #08080B;
  --bg-deep: #050507;
  --surface: #0E0E13;
  --surface-2: #14141B;
  --surface-3: #1C1C25;

  /* Lines */
  --line: rgba(201, 162, 39, 0.16);
  --line-strong: rgba(201, 162, 39, 0.34);
  --line-cool: rgba(195, 203, 214, 0.12);

  /* Text */
  --text: #F4F1EA;
  --text-soft: #D5CEC0;
  --text-dim: #A79E8D;
  --text-faint: #7A7263;
  --on-gold: #0A0904;

  /* Accents */
  --gold: #C9A227;
  --gold-bright: #F2DC9B;
  --gold-deep: #8A6D1C;
  --platinum: #C3CBD6;
  --green: #6FCF97;
  --danger: #E06C5B;

  /* Composites */
  --grad-accent: linear-gradient(120deg, #F2DC9B 0%, #C9A227 48%, #9A7A20 100%);
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, #F6E6B4 44%, #C9A227 100%);
  --glow-gold: 0 0 0 1px rgba(201, 162, 39, 0.3), 0 18px 46px -18px rgba(201, 162, 39, 0.55);

  /* Type */
  --font-display: 'Space Grotesk', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Rhythm */
  --shell: 1280px;
  --gutter: 40px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --header-height: 76px;
}


/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --gutter: 28px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --header-height: 66px; }
}