/* Co Connect — Color system
   Sampled from the brand banner, curved header gradient, hexagon nav tiles and
   emergency screens. Blue + teal is the spine; red is reserved for emergency/alerts. */
:root {
  /* ---- Brand blues (base scale) ---- */
  --cc-navy-900: #001233;
  --cc-navy-800: #04205a;   /* deep brand navy — banner left panel */
  --cc-navy-700: #0a3070;
  --cc-blue-700: #1257c2;
  --cc-blue-600: #1b6ce3;   /* PRIMARY brand blue */
  --cc-blue-500: #2e8bf0;
  --cc-blue-400: #57a6f7;
  --cc-sky-300:  #8fc1f6;
  --cc-sky-200:  #c3ddf8;
  --cc-sky-100:  #e4f0fc;
  --cc-sky-50:   #f2f8fe;

  /* ---- Brand teal / cyan ---- */
  --cc-teal-700: #0a8fa8;
  --cc-teal-600: #11adc6;   /* brand teal — gradient origin */
  --cc-teal-500: #2ac6d9;
  --cc-teal-300: #7fdfeb;

  /* ---- Cool neutrals ---- */
  --cc-ink-900:  #0e1b2e;   /* strongest text */
  --cc-ink-700:  #33415a;
  --cc-ink-600:  #475569;
  --cc-ink-500:  #5c6b82;   /* secondary text */
  --cc-ink-400:  #8a97ac;   /* muted / placeholder */
  --cc-line-300: #cdd8e6;
  --cc-line-200: #dce4ef;   /* default border */
  --cc-line-100: #edf1f7;   /* hairline / divider */
  --cc-white:    #ffffff;
  --cc-bg:       #f7fafd;   /* app/page canvas */
  --cc-surface-muted: #f4f7fb;

  /* ---- Semantic ---- */
  --cc-danger:      #cc3b38;   /* emergency red */
  --cc-danger-dark: #a6302d;
  --cc-danger-soft: #fbe9e8;
  --cc-warning:     #e8a23b;
  --cc-warning-soft:#fcf1de;
  --cc-success:     #1fa971;
  --cc-success-soft:#e3f6ee;
  --cc-info:        #1b6ce3;
  --cc-info-soft:   #e4f0fc;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg: var(--cc-bg);
  --color-surface: var(--cc-white);
  --color-surface-muted: var(--cc-surface-muted);
  --color-surface-inverse: var(--cc-navy-800);

  --text-strong: var(--cc-ink-900);
  --text-body: var(--cc-ink-700);
  --text-muted: var(--cc-ink-500);
  --text-faint: var(--cc-ink-400);
  --text-on-brand: var(--cc-white);
  --text-on-brand-soft: rgba(255,255,255,0.78);

  --brand-primary: var(--cc-blue-600);
  --brand-primary-hover: var(--cc-blue-700);
  --brand-primary-press: var(--cc-navy-700);
  --brand-accent: var(--cc-teal-600);

  --border-default: var(--cc-line-200);
  --border-strong: var(--cc-line-300);
  --border-hairline: var(--cc-line-100);

  --focus-ring: rgba(27,108,227,0.35);
}