/* ============================================================================
   T3Bootstrap · Color tokens
   Three swappable themes — Tann (default), Kupfer, Tinte — applied via a
   [data-theme] attribute on any scope. Per the SCSS source, only the six
   brand colors change between themes; the neutral ramp stays constant.
   ============================================================================ */

:root {
  /* — Neutral ramp (constant across themes) — */
  --ds-white:    #FFFFFF;
  --ds-gray-50:  #F4F5F6;
  --ds-gray-100: #E6E8EA;
  --ds-gray-200: #CDD2D6;
  --ds-gray-300: #A7AFB5;
  --ds-gray-400: #7C868D;
  --ds-gray-500: #5A636A;
  --ds-gray-600: #3D454B;
  --ds-gray-700: #262C31;
  --ds-gray-800: #14181B;
  --ds-ink:      #1A2420;   /* canonical body text / brand near-black */

  /* — Brand accent variants (raw values, available in every theme) — */
  --ds-kupfer: #B85C38;
  --ds-tann:   #2E6B4F;
  --ds-tinte:  #3A4A8C;

  /* ========================================================================
     DEFAULT THEME = TANN
     ======================================================================== */

  /* Brand color roles (Bootstrap theme-color parity) */
  --ds-primary:          #2E6B4F;
  --ds-primary-hover:    #285E45;
  --ds-primary-active:   #224F3A;
  --ds-primary-subtle:   #E7F0EB;
  --ds-primary-border:   #C3DACE;
  --ds-on-primary:       #FFFFFF;

  --ds-secondary:        #5A6B62;
  --ds-secondary-subtle: #ECEFED;

  --ds-success:          #2E7D52;
  --ds-success-subtle:   #E6F2EB;
  --ds-danger:           #C0392B;
  --ds-danger-subtle:    #F8E7E4;
  --ds-warning:          #D49A2E;
  --ds-warning-subtle:   #FBF1DD;
  --ds-info:             #2E6E8E;
  --ds-info-subtle:      #E5F0F4;

  /* Semantic surfaces & lines */
  --ds-bg:            #F6F8F6;   /* page background, tinted toward theme */
  --ds-surface:       #FFFFFF;   /* card / elevated surface */
  --ds-surface-sunken:#F0F3F1;   /* wells, code blocks, insets */
  --ds-border:        #DCE3DE;
  --ds-border-strong: #C3CCC6;

  /* Semantic text */
  --ds-text:          #1A2420;   /* body */
  --ds-text-muted:    #5A636A;   /* secondary copy (gray-500) */
  --ds-text-subtle:   #7C868D;   /* captions, meta (gray-400) */
  --ds-text-on-dark:  #F4F5F6;
  --ds-link:          var(--ds-primary);
  --ds-link-hover:    var(--ds-primary-hover);

  /* Focus ring uses the active primary at low alpha */
  --ds-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--ds-primary) 28%, transparent);
}

/* ==========================================================================
   THEME · KUPFER (copper / terracotta)
   ========================================================================== */
[data-theme="kupfer"] {
  --ds-primary:          #B85C38;
  --ds-primary-hover:    #A4502F;
  --ds-primary-active:   #8F4528;
  --ds-primary-subtle:   #F6E9E2;
  --ds-primary-border:   #E7CDBF;
  --ds-on-primary:       #FFFFFF;

  --ds-secondary:        #6B5D52;
  --ds-secondary-subtle: #F0ECE8;

  --ds-success:          #4A7C59;
  --ds-success-subtle:   #E9F1EB;
  --ds-danger:           #B23A2E;
  --ds-danger-subtle:    #F7E6E3;
  --ds-warning:          #C8842A;
  --ds-warning-subtle:   #FAEEDB;
  --ds-info:             #3E6B8C;
  --ds-info-subtle:      #E7EFF4;

  --ds-bg:            #FAF7F4;
  --ds-surface:       #FFFFFF;
  --ds-surface-sunken:#F4EEE8;
  --ds-border:        #EADFD8;
  --ds-border-strong: #DBC9BE;
}

/* ==========================================================================
   THEME · TINTE (ink indigo)
   ========================================================================== */
[data-theme="tinte"] {
  --ds-primary:          #3A4A8C;
  --ds-primary-hover:    #33417B;
  --ds-primary-active:   #2C386A;
  --ds-primary-subtle:   #E7EAF4;
  --ds-primary-border:   #C7CEE6;
  --ds-on-primary:       #FFFFFF;

  --ds-secondary:        #5B6178;
  --ds-secondary-subtle: #ECEEF2;

  --ds-success:          #2F8F5B;
  --ds-success-subtle:   #E6F3EC;
  --ds-danger:           #C73C3C;
  --ds-danger-subtle:    #F9E7E7;
  --ds-warning:          #D29A2C;
  --ds-warning-subtle:   #FBF1DC;
  --ds-info:             #3573B0;
  --ds-info-subtle:      #E6EFF7;

  --ds-bg:            #F6F7FB;
  --ds-surface:       #FFFFFF;
  --ds-surface-sunken:#EFF1F7;
  --ds-border:        #DDE1EE;
  --ds-border-strong: #C7CEE0;
}

/* ==========================================================================
   DARK SURFACES (footers, code/demo headers) — neutral, theme-agnostic
   ========================================================================== */
[data-surface="dark"] {
  --ds-bg:         #14181B;
  --ds-surface:    #1E2429;
  --ds-border:     #2E363C;
  --ds-text:       #F4F5F6;
  --ds-text-muted: #A7AFB5;
  --ds-text-subtle:#7C868D;
}