/* ============================================================
   toekom.st — Colour tokens
   Full brand ramps (50–900) + semantic aliases.
   A toekom.st page should work in greyscale — colour adds
   meaning on top of structure.
   ============================================================ */

:root {
  /* --- Red — primary. CTAs, markers, brand signature. The scalpel. --- */
  --color-red-50:  #FDE8E8;
  --color-red-100: #F9C4C4;
  --color-red-200: #F49A9A;
  --color-red-300: #EE7070;
  --color-red-400: #E54B4B;  /* PRIMARY */
  --color-red-500: #C73636;
  --color-red-600: #A02828;
  --color-red-700: #781C1C;
  --color-red-800: #521212;
  --color-red-900: #301010;

  /* --- Blue — secondary. Links, navigation, data, structural backbone. --- */
  --color-blue-50:  #E5EFF8;
  --color-blue-100: #B8D2ED;
  --color-blue-200: #7AAFE0;
  --color-blue-300: #3D88CC;
  --color-blue-400: #005397;  /* SECONDARY */
  --color-blue-500: #004580;
  --color-blue-600: #003666;
  --color-blue-700: #00284D;
  --color-blue-800: #001A33;
  --color-blue-900: #000E1C;

  /* --- Green — accent. Growth, success, systems, landscape work. --- */
  --color-green-50:  #E6F7EE;
  --color-green-100: #B5E8CF;
  --color-green-200: #7DD6AE;
  --color-green-300: #4FC48E;
  --color-green-400: #32B67A;  /* ACCENT */
  --color-green-500: #289862;
  --color-green-600: #1E7A4C;
  --color-green-700: #155C38;
  --color-green-800: #0E3E26;
  --color-green-900: #082418;

  /* --- Yellow — supplementary. Highlights, callouts, governance. --- */
  --color-yellow-50:  #FEF8E0;
  --color-yellow-100: #FCEDB3;
  --color-yellow-200: #F9DE78;
  --color-yellow-300: #F4CE40;
  --color-yellow-400: #EABC12;
  --color-yellow-500: #C49C0E;
  --color-yellow-600: #9A7A0A;
  --color-yellow-700: #705808;
  --color-yellow-800: #483A04;
  --color-yellow-900: #2A2202;

  /* --- Orange — supplementary. Warm alerts, bridges red↔yellow. --- */
  --color-orange-50:  #FEF0E5;
  --color-orange-100: #FDD5B8;
  --color-orange-200: #FAB480;
  --color-orange-300: #F59048;
  --color-orange-400: #EB6E1A;
  --color-orange-500: #C45A14;
  --color-orange-600: #9C4610;
  --color-orange-700: #74340C;
  --color-orange-800: #4C2208;
  --color-orange-900: #2C1404;

  /* --- Cream — the warm ground. Never cold white. --- */
  --color-cream-50:  #FEFDFB;
  --color-cream-100: #F8F4EC;
  --color-cream-200: #EFE8D8;
  --color-cream-300: #E2D8C2;
  --color-cream-400: #CFC4AA;
  --color-cream-500: #B0A68E;
  --color-cream-600: #8A8272;
  --color-cream-700: #666054;
  --color-cream-800: #444038;
  --color-cream-900: #262420;

  /* --- Ink — warm-tinted neutrals for text, borders, structure. --- */
  --color-ink-50:  #F5F4F2;
  --color-ink-100: #E0DEDC;
  --color-ink-200: #C2BFBB;
  --color-ink-300: #9A9692;
  --color-ink-400: #706C68;
  --color-ink-500: #504C48;
  --color-ink-600: #3A3836;
  --color-ink-700: #2A2826;
  --color-ink-800: #1A1918;  /* INK / TEXT */
  --color-ink-900: #0E0E0D;

  /* ============================================================
     SEMANTIC ALIASES
     Backgrounds use the LIGHTER cream stops (cream-100 / cream-50),
     not the heavier #EFE8D8 ground — keeps pages bright + warm.
     ============================================================ */
  --color-primary:       var(--color-red-400);
  --color-primary-hover:  var(--color-red-500);
  --color-secondary:      var(--color-blue-400);
  --color-secondary-hover: var(--color-blue-600);
  --color-accent:         var(--color-green-400);
  --color-warning:        var(--color-yellow-400);
  --color-alert:          var(--color-orange-400);

  --color-bg:            var(--color-cream-100);  /* default page ground (light) */
  --color-bg-alt:        var(--color-cream-200);  /* sunken / alt sections */
  --color-surface:       var(--color-cream-50);   /* raised cards, panels */
  --color-surface-ink:   var(--color-ink-800);    /* dark surfaces, footers */

  --color-text:          var(--color-ink-800);
  --color-text-muted:    var(--color-ink-400);
  --color-text-faint:    var(--color-ink-300);
  --color-text-inverse:  var(--color-cream-100);

  --color-border:        var(--color-cream-300);
  --color-border-strong: var(--color-cream-400);
  --color-border-ink:    var(--color-ink-100);

  /* Subdomain leads — palette stays constant, emphasis modulates */
  --lead-stations: var(--color-blue-400);   /* transit, mobility */
  --lead-maps:     var(--color-green-400);   /* landscape, spatial */
  --lead-futures:  var(--color-red-400);     /* scenarios, strategy */
  --lead-commons:  var(--color-yellow-400);  /* governance, protocols */
}