/* HCMevolve Design System — Token definitions for PRD-0019 integration styles.
   Must load BEFORE hcm-integration.css. */

:root {
  /* ── BRAND ───────────────────────────────────────────────────────── */
  --hcm-primary:        #2096EB;
  --hcm-primary-dark:   #1878BF;
  --hcm-primary-light:  #EBF5FD;
  --hcm-foam:           #F3F9FE;
  --hcm-link-water:     #D0E2F1;
  --hcm-hippie:         #6794B7;

  /* ── STATUS ──────────────────────────────────────────────────────── */
  --hcm-mantis:         #73D071;
  --hcm-mantis-lt:      #EDF9ED;
  --hcm-carnation:      #F56363;
  --hcm-carnation-lt:   #FEF0F0;
  --hcm-sun:            #FBB80E;
  --hcm-sun-lt:         #FFF8E7;

  /* ── TEXT ────────────────────────────────────────────────────────── */
  --hcm-text:           #1E293B;
  --hcm-text-sec:       #526070;
  --hcm-text-ter:       #8896A6;

  /* ── SURFACES ────────────────────────────────────────────────────── */
  --hcm-surface:        #FFFFFF;
  --hcm-surface-alt:    #F6F8FB;
  --hcm-bg:             #EFF3F8;

  /* ── LEGACY ALIASES (used by hcm-integration.css) ───────────────── */
  --cerulean:        var(--hcm-primary);
  --cerulean-dark:   var(--hcm-primary-dark);
  --cerulean-light:  var(--hcm-primary-light);
  --cerulean-pale:   var(--hcm-primary-light);
  --blumine:         var(--hcm-primary-dark);
  --hippie-blue:     var(--hcm-hippie);
  --green-active:    var(--hcm-mantis);
  --green-bg:        var(--hcm-mantis-lt);
  --red-inactive:    var(--hcm-carnation);
  --red-bg:          var(--hcm-carnation-lt);
  --amber:           var(--hcm-sun);
  --amber-bg:        var(--hcm-sun-lt);
  --black:           var(--hcm-text);
  --trout:           var(--hcm-text-sec);
  --regent-gray:     var(--hcm-text-ter);
  --water-blue:      var(--hcm-link-water);
  --foam:            var(--hcm-foam);
  --paper:           var(--hcm-surface);
  --bg-card:         var(--hcm-surface);
  --border-subtle:   #E8EEF5;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
  --font-family:  "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-h4:  20px;
  --fs-b6:  14px;
  --fs-b7:  14px;
  --fs-b9:  12px;
  --fs-b10: 10px;
  --lh-body:  1.5;
  --fw-regular:  400;
  --fw-medium:   500;

  /* ── SPACING ─────────────────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;

  /* ── RADII ───────────────────────────────────────────────────────── */
  --r-4: 4px;  --r-6: 6px;  --r-8: 8px;  --r-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────────────── */
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 12px 32px rgba(15, 22, 32, 0.08);

  /* ── MOTION ──────────────────────────────────────────────────────── */
  --dur:       180ms;
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── CONTROLS ────────────────────────────────────────────────────── */
  --ctl-h-sm: 28px;
  --ctl-h-md: 36px;
  --ctl-h-lg: 44px;
}