/* =========================================================================
   Nutrix Design System — colors_and_type.css
   Source: Nutrix Brandbook 2025
   ========================================================================= */

/* Helvetica Neue from the uploaded .ttc collection.
   Most modern browsers can parse TTCs and pick the right weight by request.
   System-installed Helvetica Neue is preferred where available. */
@font-face {
  font-family: "Helvetica Neue Local";
  src: url("fonts/HelveticaNeue.ttc") format("collection"),
       url("fonts/HelveticaNeue.ttc") format("truetype-collection");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------------------
     PRIMARY BRAND COLORS — Nutrix master palette
     "bold and professional look and feel" — red, grey, black, white
     ----------------------------------------------------------------------- */
  --nutrix-red:       #FF0029;   /* signature red */
  --nutrix-black:     #000000;
  --nutrix-white:     #FFFFFF;
  --nutrix-grey:      #AAAAAA;   /* mid grey */
  --nutrix-grey-2:    #F1F1F1;   /* very light grey */
  --nutrix-grey-3:    #8B959A;   /* cool grey */

  /* -----------------------------------------------------------------------
     SUB-BRAND COLORS — cortiSense + gSense
     Adds green and shades of blue to the master palette
     ----------------------------------------------------------------------- */
  --cortisense-green:        #004E60;
  --cortisense-blue:         #6B8DB8;
  --cortisense-light-blue-1: #D7EAFF;
  --cortisense-light-blue-2: #ECF0F8;

  /* Extended digital palette — derived shades for UI */
  --green-100:  #63939E;
  --green-200:  #3B7785;
  --green-300:  #246777;
  --green-400:  #004E60;   /* = cortisense-green */

  --blue-100:   #9BB2CF;
  --blue-200:   #7E9CC1;
  --blue-300:   #7493BC;
  --blue-400:   #6B8DB8;   /* = cortisense-blue */

  --blue-tint-1: #F4F9FF;
  --blue-tint-2: #E8F3FF;
  --blue-tint-3: #E1EFFF;

  --red-soft-1:  #FF91A3;
  --red-soft-2:  #FF637C;
  --red-soft-3:  #FF3B5B;

  --grey-100:    #D0D0D0;
  --grey-200:    #C0C0C0;
  --grey-300:    #B4B4B4;

  /* -----------------------------------------------------------------------
     SUPPORTING DATA-VIZ COLORS — charts, graphs, tables
     ----------------------------------------------------------------------- */
  --viz-red:        #FF0029;
  --viz-purple:     #BDABFC;
  --viz-mint:       #BAEBE8;
  --viz-peach:      #FFE5D9;
  --viz-deep-blue:  #03177A;
  --viz-blue:       #6B8DB8;
  --viz-sky:        #D7EAFF;
  --viz-pale:       #ECF0F8;
  --viz-teal:       #004E60;

  /* -----------------------------------------------------------------------
     SEMANTIC TOKENS — light surface (default)
     ----------------------------------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-subtle:     #F1F1F1;
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    #000000;

  --fg:            #000000;
  --fg-secondary:  #8B959A;
  --fg-muted:      #AAAAAA;
  --fg-inverse:    #FFFFFF;
  --fg-accent:     #FF0029;
  --fg-on-accent:  #FFFFFF;

  --border:        #F1F1F1;
  --border-strong: #AAAAAA;
  --border-grid:   #FF0029;  /* the signature red grid */

  --accent:        #FF0029;
  --accent-hover:  #E60024;  /* slightly darker red */
  --accent-press:  #CC0021;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Helvetica Neue
     "Helvetica Neue has been selected as the Nutrix font to convey
      clean and modern aesthetic and the brand's connection to Switzerland"
     ----------------------------------------------------------------------- */
  --font-sans:     "Helvetica Neue Local", "Helvetica Neue", "Helvetica", "Arial", "Inter", system-ui, sans-serif;
  --font-display:  "Helvetica Neue Local", "Helvetica Neue", "Helvetica", "Arial", "Inter", system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — brandbook specifies Light/Regular/Italic/Medium/Bold */
  --fw-light:    300;   /* @kind font */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-bold:     700;   /* @kind font */

  /* Type scale — Swiss, restrained, mostly numeric */
  --fs-display-1: 96px;   /* hero / key visual */
  --fs-display-2: 72px;
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-micro:     10px;

  --lh-tight:   1.05;   /* @kind font */
  --lh-snug:    1.2;    /* @kind font */
  --lh-normal:  1.45;   /* @kind font */
  --lh-relaxed: 1.6;    /* @kind font */

  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:  0;       /* @kind font */
  --ls-wide:    0.02em;  /* @kind font */
  --ls-caps:    0.08em;  /* @kind font */

  /* -----------------------------------------------------------------------
     SPACING — 4px base unit (Swiss precision)
     ----------------------------------------------------------------------- */
  --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;

  /* -----------------------------------------------------------------------
     RADII — minimal, mostly square. Cards: 0–8px max.
     The "+" mark itself is a square. Avoid pill UIs.
     ----------------------------------------------------------------------- */
  --radius-0:  0;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-4:  12px;
  --radius-pill: 999px;   /* only for tags / status pills if needed */

  /* -----------------------------------------------------------------------
     ELEVATION — almost flat. Nutrix is Swiss-flat with optional very soft shadow.
     The brandbook FORBIDS shadows on the logo. Use sparingly elsewhere.
     ----------------------------------------------------------------------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-3:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 2px var(--nutrix-red);

  /* -----------------------------------------------------------------------
     GRID — the signature red "+" grid (Nutrix's main unifying element)
     Use as background pattern for hero sections, dividers, page chrome.
     ----------------------------------------------------------------------- */
  --grid-color:        #FF0029;
  --grid-color-soft:   rgba(255, 0, 41, 0.18);
  --grid-line-width:   1px;   /* @kind spacing */
  --grid-cell:         64px;  /* @kind spacing */
  --grid-plus-size:    10px;  /* @kind spacing */

  /* -----------------------------------------------------------------------
     MOTION — restrained, no bounce. Brand is "matter-of-fact, no-nonsense".
     ----------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);   /* @kind other */
  --dur-fast:      120ms;   /* @kind other */
  --dur-base:      200ms;   /* @kind other */
  --dur-slow:      320ms;   /* @kind other */
}

/* ===========================================================================
   DARK SURFACE OVERRIDE — for hero / accent sections (red or black backgrounds)
   =========================================================================== */
.nutrix-on-dark,
.nutrix-on-red {
  --bg: #000000;
  --bg-subtle: #1A1A1A;
  --fg: #FFFFFF;
  --fg-secondary: #AAAAAA;
  --fg-muted: #8B959A;
  --border: rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.32);
}

.nutrix-on-red {
  --bg: #FF0029;
  --bg-subtle: #E60024;
  --fg: #FFFFFF;
  --fg-secondary: rgba(255,255,255,0.85);
  --border: rgba(255,255,255,0.2);
}

/* ===========================================================================
   BASE TYPOGRAPHY ELEMENT STYLES
   =========================================================================== */
.nutrix-typography,
.nutrix-typography * {
  font-family: var(--font-sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .nx-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h2, .nx-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h3, .nx-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .nx-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .nx-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
}
.nx-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
}
.nx-body-sm,
small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.nx-caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-secondary);
  letter-spacing: var(--ls-wide);
}
.nx-eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
}
.nx-display-1 {
  font-size: var(--fs-display-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.nx-display-2 {
  font-size: var(--fs-display-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
code, kbd, samp, .nx-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-1);
}

/* ===========================================================================
   THE NUTRIX RED-PLUS GRID — utility for backgrounds
   =========================================================================== */
.nx-grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-color-soft) var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(to bottom, var(--grid-color-soft) var(--grid-line-width), transparent var(--grid-line-width));
  background-size: var(--grid-cell) var(--grid-cell);
}
.nx-grid-bg--strong {
  background-image:
    linear-gradient(to right, var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width));
  background-size: var(--grid-cell) var(--grid-cell);
}