/* ============================================================
   DNEYE — COLOR TOKENS
   A clinical, high-precision palette. Near-black "ink" anchors
   the brand (the logo is pure black); a single signature
   "Helix" teal carries interaction; the ACMG 5-tier scale is a
   first-class semantic system for variant classification.
   ============================================================ */

:root {
  /* ---- Base neutrals: cool, near-black ink → paper ---- */
  --ink-900: #07090d;   /* deepest — app chrome, dark surfaces */
  --ink-800: #0a0e14;   /* brand black (logo) */
  --ink-700: #12171f;
  --ink-600: #1b212b;
  --ink-500: #2a323e;
  --ink-400: #444e5c;
  --ink-300: #6b7585;   /* muted text */
  --ink-200: #9aa3b2;
  --ink-100: #c4cad4;
  --ink-050: #e2e6ec;
  --ink-025: #eef1f5;
  --paper-2: #f6f8fa;   /* app canvas */
  --paper-1: #fbfcfd;   /* raised surface */
  --paper-0: #ffffff;   /* pure white */

  /* ---- Signature accent: "Helix" teal (clinical, scientific) ---- */
  --helix-900: #043c40;
  --helix-700: #066b6f;
  --helix-600: #08868a;
  --helix-500: #0aa6a0;   /* primary accent */
  --helix-400: #2bc2b8;
  --helix-300: #6fdad1;
  --helix-100: #c4f0ec;
  --helix-050: #e7faf8;

  /* ---- Iris violet: secondary accent for AI / generated content ---- */
  --iris-700: #3b2d8f;
  --iris-500: #5b49d6;
  --iris-300: #9b8df0;
  --iris-100: #e4e0fb;
  --iris-050: #f1eefe;

  /* ---- ACMG classification 5-tier scale (domain semantic) ---- */
  /* Pathogenic */
  --acmg-p-700: #8f1620;
  --acmg-p-500: #c8202e;
  --acmg-p-100: #fadbde;
  --acmg-p-050: #fdeef0;
  /* Likely Pathogenic */
  --acmg-lp-700: #9a4a07;
  --acmg-lp-500: #e0760f;
  --acmg-lp-100: #fbe6cd;
  --acmg-lp-050: #fdf3e7;
  /* Uncertain Significance (VUS) */
  --acmg-vus-700: #6a5a23;
  --acmg-vus-500: #b59428;
  --acmg-vus-100: #f1e7c4;
  --acmg-vus-050: #f8f3e2;
  /* Likely Benign */
  --acmg-lb-700: #2f6a4f;
  --acmg-lb-500: #4a9e74;
  --acmg-lb-100: #d7ecdf;
  --acmg-lb-050: #edf6f0;
  /* Benign */
  --acmg-b-700: #1f5d73;
  --acmg-b-500: #2f8db0;
  --acmg-b-100: #d4e9f1;
  --acmg-b-050: #ebf4f8;

  /* ---- Status (UI feedback, distinct from ACMG) ---- */
  --signal-success: #2f8d5b;
  --signal-warning: #d98a14;
  --signal-danger:  #cf2f3c;
  --signal-info:    var(--helix-600);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */

  /* Surfaces */
  --surface-canvas:   var(--paper-2);
  --surface-card:     var(--paper-0);
  --surface-raised:   var(--paper-1);
  --surface-sunken:   var(--ink-025);
  --surface-inverse:  var(--ink-800);
  --surface-overlay:  rgba(7, 9, 13, 0.55);

  /* Text */
  --text-strong:   var(--ink-800);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-200);
  --text-inverse:  var(--paper-0);
  --text-accent:   var(--helix-600);
  --text-link:     var(--helix-600);

  /* Borders / hairlines */
  --border-strong: var(--ink-100);
  --border-default: var(--ink-050);
  --border-subtle: var(--ink-025);
  --border-focus:  var(--helix-500);

  /* Interactive (primary = ink, accent available) */
  --action-primary:        var(--ink-800);
  --action-primary-hover:  var(--ink-700);
  --action-primary-press:  var(--ink-900);
  --action-accent:         var(--helix-500);
  --action-accent-hover:   var(--helix-600);
  --action-accent-press:   var(--helix-700);
  --action-ghost-hover:    var(--ink-025);

  /* Focus ring */
  --ring: 0 0 0 3px var(--helix-100);
  --ring-inverse: 0 0 0 3px rgba(10, 166, 160, 0.35);
}

/* ============================================================
   DARK SCOPE — app chrome & marketing hero run on ink.
   Apply .dneye-dark on a container to flip semantics.
   ============================================================ */
.dneye-dark {
  --surface-canvas:   var(--ink-900);
  --surface-card:     var(--ink-800);
  --surface-raised:   var(--ink-700);
  --surface-sunken:   var(--ink-900);
  --surface-inverse:  var(--paper-0);
  --surface-overlay:  rgba(0, 0, 0, 0.6);

  --text-strong:   var(--paper-0);
  --text-body:     var(--ink-100);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-400);
  --text-inverse:  var(--ink-800);

  --border-strong: var(--ink-500);
  --border-default: var(--ink-600);
  --border-subtle: var(--ink-700);

  --action-primary:        var(--paper-0);
  --action-primary-hover:  var(--ink-050);
  --action-primary-press:  var(--ink-100);
  --action-ghost-hover:    var(--ink-700);
  --ring: 0 0 0 3px rgba(10, 166, 160, 0.35);
}