/* Coldwater Logic — Color tokens
   Core brand: Aqua (#00d9d9) + Onyx (#353839). Cool neutral ramp derived from onyx.
   Small support set: one deep-teal secondary + semantic states + a restrained data-viz series. */

:root {
  /* ---- Brand core ---- */
  --cwl-aqua:        #00d9d9; /* primary — the breakout arrow */
  --cwl-aqua-bright: #24f2f2; /* brighter aqua — the brand's on-dark treatment */
  --cwl-aqua-deep:   #00b3b3; /* hover */
  --cwl-aqua-press:  #009a9a; /* active/press */
  --cwl-aqua-tint:   #d6f7f7; /* faint fill, callout backgrounds */
  --cwl-aqua-tint-2: #abefef; /* slightly stronger tint */

  --cwl-onyx:        #353839; /* primary ink / the mark's disc */
  --cwl-onyx-deep:   #1e2021; /* near-black headlines, dark surfaces */
  --cwl-logo-ink-dark: #bbc4c7; /* cool-gray ink the logo uses on dark surfaces */

  /* ---- Secondary support ---- */
  --cwl-teal-ink:    #16303a; /* deep teal-navy — charts, secondary dark accent */
  --cwl-teal-ink-2:  #27505e;

  /* ---- Cool neutral ramp ---- */
  --cwl-ink-900: #1e2021;
  --cwl-ink-800: #353839;
  --cwl-ink-700: #4a4e4f;
  --cwl-ink-600: #6b7072;
  --cwl-ink-500: #8b9092;
  --cwl-ink-400: #abafb1;
  --cwl-ink-300: #cdd0d1;
  --cwl-ink-200: #e4e6e6;
  --cwl-ink-100: #f1f2f2;
  --cwl-ink-50:  #f7f8f8;
  --cwl-white:   #ffffff;

  /* ---- Semantic states ---- */
  --cwl-success:      #1f9d6b;
  --cwl-success-tint: #e2f4ec;
  --cwl-warning:      #d99206;
  --cwl-warning-tint: #faf0d8;
  --cwl-danger:       #d6453d;
  --cwl-danger-tint:  #fae3e1;
  --cwl-info:         #2f6fed;
  --cwl-info-tint:    #e2ebfd;

  /* ---- Data-viz series (restrained, brand-led) ---- */
  --cwl-viz-1: #00d9d9; /* aqua */
  --cwl-viz-2: #16303a; /* teal ink */
  --cwl-viz-3: #6b7072; /* ink-600 */
  --cwl-viz-4: #00b3b3; /* aqua deep */
  --cwl-viz-5: #abafb1; /* ink-400 */
  --cwl-viz-6: #d99206; /* warning amber, sparing */

  /* ---- Semantic aliases: LIGHT surface (default) ---- */
  --surface-page:    var(--cwl-white);
  --surface-sunken:  var(--cwl-ink-50);
  --surface-card:    var(--cwl-white);
  --surface-raised:  var(--cwl-white);
  --surface-inverse: var(--cwl-onyx);

  --text-strong:  var(--cwl-onyx-deep);
  --text-body:    var(--cwl-ink-800);
  --text-muted:   var(--cwl-ink-600);
  --text-subtle:  var(--cwl-ink-500);
  --text-onbrand: var(--cwl-onyx-deep); /* dark text reads best on aqua */
  --text-inverse: var(--cwl-white);

  --border-hairline: var(--cwl-ink-200);
  --border-default:  var(--cwl-ink-300);
  --border-strong:   var(--cwl-ink-800);

  --accent:        var(--cwl-aqua);
  --accent-hover:  var(--cwl-aqua-deep);
  --accent-press:  var(--cwl-aqua-press);
  --accent-tint:   var(--cwl-aqua-tint);

  --focus-ring: var(--cwl-aqua-deep);
}

/* ---- Dark surface scope — the logo's native context (deck moments, hero panels) ---- */
.cwl-dark,
[data-theme="dark"] {
  --surface-page:    var(--cwl-onyx-deep);
  --surface-sunken:  #16181a;
  --surface-card:    var(--cwl-onyx);
  --surface-raised:  #3f4344;
  --surface-inverse: var(--cwl-white);

  --text-strong:  var(--cwl-white);
  --text-body:    var(--cwl-ink-200);
  --text-muted:   var(--cwl-ink-400);
  --text-subtle:  var(--cwl-ink-500);
  --text-onbrand: var(--cwl-onyx-deep);
  --text-inverse: var(--cwl-onyx-deep);

  --border-hairline: rgba(255,255,255,0.10);
  --border-default:  rgba(255,255,255,0.18);
  --border-strong:   var(--cwl-white);

  --accent:        var(--cwl-aqua-bright); /* brighter aqua reads truer on dark, per the logo */
  --accent-hover:  #5cf7f7;
  --accent-press:  var(--cwl-aqua);
  --accent-tint:   rgba(36,242,242,0.16);
}