/* ============================================================
   Creative Projects — Color tokens
   Clean, classic, photography-led base: pure white + cool
   neutral concrete grays, a restrained petrol/steel-blue brand
   accent, with amber kept as a warm secondary.
   NOTE: accent hue is a best-guess interpretation of
   creative-projects.at pending the real brand values / a
   screenshot. See readme.md › VISUAL FOUNDATIONS.
   ============================================================ */

:root {
  /* ---- Ink: cool near-black neutral scale ---- */
  --ink-900: #16181A;   /* near-black, cool */
  --ink-800: #24282B;
  --ink-700: #3B4044;
  --ink-600: #565B60;
  --ink-500: #767B81;
  --ink-400: #9AA0A6;
  --ink-300: #C0C5CA;
  --ink-200: #D7DBDF;
  --ink-100: #E9ECEF;
  --ink-50:  #F4F6F7;

  /* ---- Paper: surfaces ---- */
  --paper:    #FFFFFF;   /* clean white page */
  --paper-2:  #F4F6F7;   /* recessed / alt section */
  --white:    #FFFFFF;

  /* ---- Petrol: primary structural signal (brand accent) ---- */
  --petrol-700: #1C4257;
  --petrol-600: #245268;
  --petrol-500: #2E6480;  /* brand accent */
  --petrol-400: #4A86A3;
  --petrol-300: #88AFC4;
  --petrol-100: #DCE7ED;
  --petrol-50:  #EFF4F7;

  /* ---- Blueprint: alias kept for back-compat (now petrol) ---- */
  --blueprint-700: var(--petrol-700);
  --blueprint-600: var(--petrol-600);
  --blueprint-500: var(--petrol-500);
  --blueprint-300: var(--petrol-300);
  --blueprint-100: var(--petrol-100);

  /* ---- Amber: warm secondary accent ---- */
  --amber-700: #8F5414;
  --amber-600: #A8651C;
  --amber-500: #C57E26;
  --amber-400: #DB9A45;
  --amber-200: #EFCF97;
  --amber-100: #F5E4C7;
  --amber-50:  #FAF1DE;

  /* ---- Semantic status ---- */
  --success-600: #3A7551;
  --success-100: #DDEBE1;
  --warning-600: #B07A1E;
  --warning-100: #F5E6C8;
  --danger-600:  #AD3A2D;
  --danger-100:  #F3DAD5;
  --info-600:    #2E6480;
  --info-100:    #DCE7ED;

  /* ============================================================
     Semantic aliases — reference THESE in components, not raw.
     ============================================================ */
  --bg-page:        var(--paper);
  --bg-alt:         var(--paper-2);
  --bg-ink:         var(--ink-900);     /* dark sections */
  --surface-card:   var(--white);
  --surface-sunken: var(--paper-2);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-ink:    var(--paper);
  --text-on-accent: var(--white);
  --text-accent:    var(--petrol-600);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-900);
  --border-muted:    var(--ink-100);

  --accent:          var(--petrol-500);
  --accent-strong:   var(--petrol-600);
  --accent-tint:     var(--petrol-100);
  --accent-2:        var(--amber-500);
  --accent-2-tint:   var(--amber-100);

  --focus-ring:      var(--petrol-500);
}