/* =========================================================================
   Nyxia Design Tokens
   Midnight Medical — premium longevity
   Single source of truth for colors, type, spacing, radii, shadows, motion.
   Import this file from anything you build.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLORS — base
     ----------------------------------------------------------------------- */
  --bg-primary:    #0A0A0A;   /* page canvas */
  --bg-secondary:  #1A1A1A;   /* cards, sheets, elevated surfaces */
  --bg-tertiary:   #2A2A35;   /* faint dividers, subtle borders */

  --teal-primary:  #00B8A0;   /* CTAs, links, DNA, key data */
  --teal-light:    #1FD4BC;   /* hover, gradient mid */
  --teal-pale:     #7FEDE0;   /* highlights, WOW numbers */

  --text-primary:   #FFFFFF;
  --text-secondary: #A8A8A8;
  --text-tertiary:  #6A6A75;

  --success: #34D399;
  --warning: #FBBF24;
  --error:   #EF4444;

  /* Teal opacity ramp — the only way to add "color variety" */
  --teal-04:  rgba(0, 184, 160, 0.04);
  --teal-08:  rgba(0, 184, 160, 0.08);
  --teal-16:  rgba(0, 184, 160, 0.16);
  --teal-24:  rgba(0, 184, 160, 0.24);
  --teal-40:  rgba(0, 184, 160, 0.40);
  --teal-60:  rgba(0, 184, 160, 0.60);

  /* White opacity ramp — for borders, dividers, scrims */
  --white-04: rgba(255, 255, 255, 0.04);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-24: rgba(255, 255, 255, 0.24);

  /* -----------------------------------------------------------------------
     COLORS — semantic
     ----------------------------------------------------------------------- */
  --surface-canvas:    var(--bg-primary);
  --surface-elevated:  var(--bg-secondary);
  --surface-sunken:    #050505;

  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-tertiary);
  --fg-accent: var(--teal-primary);
  --fg-on-accent: #FFFFFF;

  --border-default:  var(--white-06);
  --border-strong:   var(--white-12);
  --border-focus:    var(--teal-40);
  --border-active:   var(--teal-primary);

  /* Data viz palette — teal-adjacent shades, ordered for sequential use */
  --viz-1: #00B8A0;   /* primary */
  --viz-2: #1FD4BC;
  --viz-3: #7FEDE0;
  --viz-4: #4A8C82;
  --viz-5: #2D5F58;
  --viz-6: #163330;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — family + weights
     ----------------------------------------------------------------------- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — scale (desktop ; mobile in @media below)
     ----------------------------------------------------------------------- */
  --fs-display-xl: 120px;  --lh-display-xl: 1.02;  --ls-display-xl: -1px;
  --fs-display-l:  96px;   --lh-display-l:  1.04;  --ls-display-l:  -1px;
  --fs-display-m:  72px;   --lh-display-m:  1.06;  --ls-display-m:  -0.75px;

  --fs-h1: 56px;  --lh-h1: 1.08;  --ls-h1: -0.5px;
  --fs-h2: 40px;  --lh-h2: 1.12;  --ls-h2: -0.4px;
  --fs-h3: 28px;  --lh-h3: 1.2;   --ls-h3: -0.2px;
  --fs-h4: 20px;  --lh-h4: 1.3;   --ls-h4: 0;

  --fs-body-l:  20px;  --lh-body-l: 1.5;  --ls-body-l: 0;
  --fs-body-m:  16px;  --lh-body-m: 1.55; --ls-body-m: 0;
  --fs-body-s:  14px;  --lh-body-s: 1.5;  --ls-body-s: 0;

  --fs-caption: 13px;  --lh-caption: 1.4;  --ls-caption: 0;
  --fs-overline: 12px; --lh-overline: 1.3; --ls-overline: 4px;  /* UPPERCASE */
  --fs-micro:    11px; --lh-micro:    1.3; --ls-micro:    5px;  /* UPPERCASE */

  /* -----------------------------------------------------------------------
     SPACING — 4px base unit
     ----------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* buttons */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* sheets */
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     SHADOWS / GLOWS
     ----------------------------------------------------------------------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 8px 32px rgba(0, 0, 0, 0.6);
  --elev-3: 0 24px 64px rgba(0, 0, 0, 0.7);

  --glow-xs: 0 0 8px  rgba(0, 184, 160, 0.24);
  --glow-sm: 0 0 16px rgba(0, 184, 160, 0.32);
  --glow-md: 0 0 32px rgba(0, 184, 160, 0.32);
  --glow-lg: 0 0 64px rgba(0, 184, 160, 0.40);
  --glow-xl: 0 0 120px rgba(0, 184, 160, 0.48);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-reveal:  1200ms;  /* WOW number count-up */

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --content-max: 1200px;
  --gutter-desktop: 96px;
  --gutter-mobile:  24px;
  --section-y-desktop: 160px;
  --section-y-mobile:  96px;

  /* -----------------------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
}

/* Mobile type scale — collapsed display sizes */
@media (max-width: 767px) {
  :root {
    --fs-display-xl: 64px;  --ls-display-xl: -0.5px;
    --fs-display-l:  52px;  --ls-display-l:  -0.5px;
    --fs-display-m:  40px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body-l: 18px;
  }
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these instead of raw size variables in components.
   ========================================================================= */

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, .display-l, .display-m,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  margin: 0;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--ls-display-l);  }
.display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--ls-display-m);  }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-regular); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-medium); }

p, .body-m { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--text-primary); margin: 0; }
.body-l    { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.body-s    { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--text-secondary); }

.caption   { font-size: var(--fs-caption);  line-height: var(--lh-caption); color: var(--text-secondary); }

.overline {
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
}

.text-accent { color: var(--teal-primary); }
.text-pale   { color: var(--teal-pale); }

/* Focus ring — applied universally to interactive elements via :focus-visible */
*:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--teal-24);
  border-radius: var(--radius-xs);
}

/* Selection */
::selection {
  background: var(--teal-40);
  color: var(--text-primary);
}