/* =============================================================================
   COLOUR TOKENS — eMTe Theme 2026
   Layer 1: Primitive colour ramps (raw values, not for direct use in components).
   Layer 2: Semantic aliases (use these in style.css).
   ============================================================================= */

:root {

  /* ── Layer 1: Primitive Ramps ─────────────────────────────────────────────── */

  /* Neutral — warm off-white → near-black */
  --color-neutral-50:  #FDFAF5;  /* near-white card surface        */
  --color-neutral-100: #F5F0E8;  /* page background (sand)         */
  --color-neutral-200: #EDE7DB;  /* hover bg / section dividers    */
  --color-neutral-300: #E2D9CE;  /* default border on light bg     */
  --color-neutral-400: #C8BEB3;  /* disabled fill / mid-tone       */
  --color-neutral-500: #A09890;  /* placeholder / muted text       */
  --color-neutral-600: #7A746E;  /* secondary text on light bg     */
  --color-neutral-700: #3D3A36;  /* secondary text, dark variant   */
  --color-neutral-800: #242220;  /* dark cards / feature panels    */
  --color-neutral-900: #111010;  /* footer / darkest surface       */

  /* Accent — brand green ramp */
  --color-accent-50:  #F3F8EF;
  --color-accent-100: #EAF2E3;   /* very light green tint fills    */
  --color-accent-200: #C8DFC0;
  --color-accent-300: #A7C78F;
  --color-accent-400: #6F9655;
  --color-accent-500: #4A6E2E;   /* lighter green, secondary       */
  --color-accent-600: #263D18;   /* primary brand green            */
  --color-accent-700: #1A2B10;   /* hover / pressed state          */
  --color-accent-800: #13210C;
  --color-accent-900: #0C1708;

  /* Base aliases */
  --color-black: var(--color-neutral-900);  /* #111010 */
  --color-white: #ffffff;   /* #FDFAF5 */


  /* ── Layer 2: Semantic Tokens ─────────────────────────────────────────────── */

  /* Surfaces */
  --color-surface:        var(--color-neutral-100);  /* #F5F0E8 — warm page background    */
  --color-surface-hover:  var(--color-neutral-200);  /* #EDE7DB — hover / subtle fills    */
  --color-surface-subtle: var(--color-neutral-200);  /* #EDE7DB — section separators      */
  --color-surface-card:   var(--color-neutral-50);   /* #FDFAF5 — card / white surface    */
  --color-surface-dark:   var(--color-neutral-800);  /* #242220 — dark feature panels     */
  --color-surface-footer: var(--color-neutral-900);  /* #111010 — footer background       */

  /* Text */
  --color-text-primary:    var(--color-neutral-900);  /* #111010 — default body text       */
  --color-text-secondary:  var(--color-neutral-600);  /* #7A746E — muted / caption text    */
  --color-text-tertiary:   var(--color-neutral-500);  /* #A09890 — disabled / placeholder  */
  --color-text-on-dark:    var(--color-neutral-50);   /* #FDFAF5 — text on dark surfaces   */
  --color-text-muted-dark: #9A9490;                   /* muted text on dark backgrounds    */

  /* Borders */
  --color-border:       var(--color-neutral-300);  /* #E2D9CE — default border on light */
  --color-border-dark:  #2E2B28;                   /* border on dark surfaces            */
  --color-border-focus: var(--color-accent-600);   /* #263D18 — focus ring (brand green) */

  /* Brand */
  --color-brand:        var(--color-accent-500);   /* #263D18 — primary action           */
  --color-brand-hover:  var(--color-accent-600);   /* #1A2B10 — hover / pressed          */
  --color-brand-light:  var(--color-accent-500);   /* #4A6E2E — secondary accents        */
  --color-brand-on-dark: #6BA348;                  /* green on dark — AA 5.25:1          */
  --color-brand-bg:     var(--color-accent-100);   /* #EAF2E3 — very light green fill    */

  /* Semantic status */
  --color-success:     #4A7C5A;
  --color-success-bg:  #EAF2EC;
  --color-warning:     #B8782A;
  --color-warning-bg:  #FBF3E4;
  --color-error:       #B84040;
  --color-error-bg:    #FAEAEA;
  --color-info:        #3A6B8A;
  --color-info-bg:     #E4EEF5;
}