/* ============================================================
   Mettro — Colour tokens
   Source: Mettro Style Guide 2026 (PDF) + Figma "New Mettro Website_V2"
   Values transcribed verbatim — do not snap to a palette grid.
   ============================================================ */

:root {
  /* --- Main brand / greys (Style Guide "Greys" + "Tints") --- */
  --grey-white:        #FFFFFF;
  --grey-ultralight:   #F7F7F7; /* R247 G247 B247 */
  --grey-light:        #E7E7E6; /* R231 G231 B230 */
  --grey-mid-light:    #D7D7D6; /* R215 G215 B214 */
  --grey-mid:          #ACACAB; /* R172 G172 B171 */
  --grey-dark:         #6C6C6B; /* R108 G108 B107 */
  --grey-darker:       #404040; /* R64  G64  B64  */
  --grey-charcoal:     #1D1D1F; /* rgb(29,29,31)  — dark surfaces */
  --grey-foreground:   #1C1D22; /* rgb(28,29,34)  — near-black text */
  --grey-black:        #000000; /* main brand */

  /* --- Secondary brand --- */
  --brand-purple:      #8475B6; /* R132 G117 B182 */
  --brand-blue:        #439BD6; /* R67  G155 B214 */
  --brand-green:       #5FBC5B; /* R95  G188 B91  */

  /* --- Highlight brand --- */
  --brand-yellow:      #FDDB03; /* R253 G219 B3   */
  --brand-orange:      #F15623; /* R241 G86  B35  */
  --brand-red:         #EB2444; /* R235 G36  B68  */

  /* --- Yellow tints (Style Guide) --- */
  --yellow-50:         #FFFBE6;
  --yellow-100:        #FEED81;
  --yellow-300:        #FDE235;
  --yellow-500:        #FDDB03;
  --yellow-700:        #E4C503;
  --yellow-900:        #CAAF02;

  /* --- Support (UI states, from Figma variable collection) --- */
  --support-success:   #17B26A; /* rgb(23,178,106) */
  --support-danger:    #F04438; /* rgb(240,68,56)  */
  --support-teal:      #008C99; /* rgb(0,140,153)  */

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     Mettro's site is dark-first (black canvas, white type).
     ============================================================ */

  /* Primary call-to-action = brand red "Danger" button */
  --color-primary:            var(--brand-red);
  --color-primary-contrast:   var(--grey-white);
  --color-accent:             var(--brand-yellow);

  /* Dark theme (default site surface) */
  --bg-page:                  var(--grey-black);
  --surface-card:             var(--grey-charcoal);
  --surface-card-2:           #262629;
  --text-primary:             var(--grey-white);
  --text-secondary:           var(--grey-mid);
  --text-muted:               var(--grey-dark);
  --border-subtle:            rgba(255,255,255,0.10);
  --border-strong:            rgba(255,255,255,0.24);

  /* Light theme (blog, inner pages, cards on white) */
  --bg-page-light:            var(--grey-white);
  --surface-light:            var(--grey-ultralight);
  --text-on-light:            var(--grey-foreground);
  --text-secondary-light:     var(--grey-dark);
  --border-on-light:          var(--grey-light);

  /* Service / category accent hues (used on icon chips + timeline) */
  --accent-web:               var(--brand-orange);
  --accent-marketing:         var(--brand-green);
  --accent-support:           var(--brand-blue);
  --accent-strategy:          var(--brand-purple);

  /* Stars / ratings */
  --rating-star:              var(--brand-yellow);
}