/* ===========================================================================
   Baltic Dental — Color tokens
   Brand accent = Clinical Cyan / мята. Dark theme overrides ONLY
   bg/text/border/shadow — brand cyan & blue never change.
   =========================================================================== */

:root {
  /* --- Brand: Clinical Cyan (мята) --- */
  --bd-mint:        #5BC8D6;   /* primary buttons, active states, avatars, focus */
  --bd-mint-deep:   #3FA9B8;   /* accent text, progress bars */
  --bd-mint-soft:   #E6F6F8;   /* soft fills, pills */
  --bd-blue:        #2976BD;   /* info, links, secondary accent */
  --bd-blue-soft:   #E6EFF8;   /* blue pill backgrounds */

  --accent:           var(--bd-mint);
  --accent-deep:      var(--bd-mint-deep);
  --accent-secondary: var(--bd-blue);

  /* --- Neutrals: ink & text hierarchy --- */
  --bd-black: #111111;
  --bd-ink:   #1B1F22;
  --fg-1: #111111;   /* primary text */
  --fg-2: #4A5158;   /* secondary text */
  --fg-3: #5D646B;   /* tertiary / muted — darkened for AA (4.5:1) on tinted surfaces */
  --fg-on-accent: #111111;        /* text over mint fill (mint is light) */
  --fg-inverse:   #FFFFFF;        /* text over dark surfaces */

  /* --- Surfaces --- */
  --bg-1: #FFFFFF;
  --bg-2: #F7F8F9;
  --bg-3: #EEF1F3;
  --bg-inverse: #111111;
  --surface-card:   var(--bg-1);
  --surface-sunken: var(--bg-2);
  --surface-app:    var(--bg-2);

  /* --- Borders: silver → titanium --- */
  --border-1: #E4E7EA;
  --border-2: #DDE2E6;   /* silver */
  --border-strong: #B7BDC3;  /* titanium */

  /* --- Status / semantic --- */
  --success: #3FB58E;
  --warning: #D7A24A;
  --danger:  #C4544A;
  --info:    var(--bd-blue);

  --success-soft: color-mix(in srgb, var(--success) 14%, white);
  --warning-soft: color-mix(in srgb, var(--warning) 16%, white);
  --danger-soft:  color-mix(in srgb, var(--danger)  14%, white);
  --info-soft:    var(--bd-blue-soft);

  /* --- Semantic text aliases --- */
  --text-heading: var(--fg-1);
  --text-body:    var(--fg-2);
  --text-muted:   var(--fg-3);
  --text-link:    var(--bd-blue);
  --text-accent:  var(--bd-mint-deep);

  color-scheme: light;
}

/* --- Dark theme: only bg/text/border/shadow flip; brand stays --- */
:root[data-theme="dark"] {
  --bd-black: #F4F6F7;
  --bd-ink:   #E8ECEE;
  --fg-1: #F4F6F7;
  --fg-2: #B7BDC3;
  --fg-3: #8A9097;
  --fg-inverse: #111111;

  --bg-1: #16191C;
  --bg-2: #101315;
  --bg-3: #1E2327;
  --bg-inverse: #FFFFFF;
  --surface-card:   #16191C;
  --surface-sunken: #101315;
  --surface-app:    #0B0D0F;

  --border-1: #2A3034;
  --border-2: #333A3F;
  --border-strong: #4A5258;

  --success-soft: color-mix(in srgb, var(--success) 22%, #16191C);
  --warning-soft: color-mix(in srgb, var(--warning) 22%, #16191C);
  --danger-soft:  color-mix(in srgb, var(--danger)  22%, #16191C);
  --info-soft:    color-mix(in srgb, var(--bd-blue) 22%, #16191C);

  color-scheme: dark;
}