/* ============================================================================
   JR&CO — PITCH Design System · Token Layer
   ----------------------------------------------------------------------------
   Canonical CSS custom properties measured from the PITCH CRM (CRM Hub +
   Customer Dashboard) against the JR&CO brand system.

   USAGE
     <link rel="stylesheet" href="../design-system/jrco-pitch-tokens.css">
     (link this BEFORE the page's own stylesheet so components can consume it)

   THEMING
     :root                      = LIGHT (default application surface)
     [data-theme="dark"] / .dark = DARK mode override
     Permanently-dark brand bands (sidebar, top bar, section headers, hero,
     modal) DO NOT flip — their gradient tokens carry the same value in both
     themes.

   BRAND INVARIANTS (do not violate)
     1. Primary controls / active states use --red-gradient; never flat red on
        a dark ground.
     2. Corners are squared: radius 0 (max --radius-2 = 4px). Round (pill) only
        for avatars, dots, spinners, and pill chips.
     3. No blue chrome. green/amber/red are FUNCTIONAL status colors only.
        There is intentionally NO --blue token — route "info" to --steel.
     4. Typeface = Neue Haas Grotesk Display/Text (Arial/Arial Black fallback).
        Headers uppercase, heavy, tight negative tracking. Uppercase labels
        use POSITIVE tracking.

   Loads the Adobe Fonts kit for Neue Haas Grotesk.
   ============================================================================ */

@import url("https://use.typekit.net/dhj1sez.css");

:root {
  /* ── Brand red ── */
  --red:            #E92A2C;
  --red-dark:       #A71F23;
  --red-press:      #8A1A1E;
  --red-gradient:   linear-gradient(180deg, #E92A2C 0%, #A71F23 100%);
  --red-gradient-h: linear-gradient(90deg,  #E92A2C 0%, #A71F23 100%);
  --red-bg:         #F4D9D9;
  --red-bg-soft:    rgba(233,42,44,.06);

  /* ── Neutrals / ink ── */
  --charcoal:      #202020;   /* PRIMARY INK (not a surface) */
  --charcoal-soft: #151515;
  --ink-black:     #0b0b0b;
  --steel:         #404040;   /* secondary ink / 2nd data series */
  --mid:           #6B6B6B;   /* tertiary text / captions */
  --muted:         #9A9A9A;   /* metadata / disabled / placeholder (meta only) */
  --border:        #E6E6E6;   /* card & block hairline */
  --border-soft:   #F0F0F0;   /* row dividers */
  --border-strong: #D4D4D4;   /* outline-button / input border */
  --rule-strong:   #202020;   /* 1px solid rule between major blocks */

  /* ── Surfaces ── */
  --off-white:     #EDEDED;   /* PAGE GROUND (not text) */
  --surface:       #FFFFFF;   /* card / panel / modal body */
  --surface-alt:   #F4F4F4;   /* row hover / zebra / inset well */
  --surface-alt-2: #FAFAFA;   /* nested-row hover */
  --on-dark:       #FFFFFF;   /* text/icon on any dark band (fixed) */
  --on-red:        #FFFFFF;   /* text/icon on red (fixed) */

  /* ── Functional status (color = meaning ONLY) ── */
  --green:          #3EC77D;  /* healthy FILL — dots, bars, donut */
  --green-dark:     #17703C;
  --green-ink:      #1F7A44;  /* healthy TEXT (AA on light) */
  --green-gradient: linear-gradient(180deg,#3EC77D,#17703C);
  --green-bg:       #E1F1E8;
  --amber:          #F0BE45;  /* monitor/warn FILL */
  --amber-dark:     #A9781C;
  --amber-ink:      #C8901A;  /* monitor TEXT (large/bold on light) */
  --amber-gradient: linear-gradient(180deg,#F0BE45,#A9781C);
  --amber-bg:       #F7ECCF;
  /* --blue: intentionally undefined — brand forbids blue chrome. Route info to --steel. */

  /* ── Bands (permanently dark — same value in both themes) ── */
  --band-dark:  linear-gradient(150deg,#242424 0%,#151515 50%,#0b0b0b 100%);
  --band-steel: linear-gradient(160deg,#525252 0%,#000000 100%);
  --band-red:   linear-gradient(180deg,#E92A2C,#A71F23);
  --band-inset: linear-gradient(160deg,#1e1e1e,#0d0d0d);
  --sheen:      rgba(255,255,255,.16);   /* diagonal header wipe, skewX(-24deg) */
  --scrim:      rgba(8,8,8,.62);         /* modal backdrop — NO backdrop-filter */

  /* ── Type ── */
  --font:       "neue-haas-grotesk-display","neue-haas-grotesk-text","Neue Haas Grotesk Display Pro","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:  "neue-haas-grotesk-text","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-black: "neue-haas-grotesk-display","Arial Black","Arial Bold",Arial,sans-serif;

  /* ── Radius ── */
  --radius:      0;
  --radius-1:    2px;
  --radius-2:    4px;   /* max */
  --radius-pill: 999px; /* avatars / dots / pills / spinners only */

  /* ── Elevation ── */
  --shadow-1:     0 1px 2px rgba(20,20,20,.06),0 1px 1px rgba(20,20,20,.04);
  --shadow-2:     0 4px 12px rgba(20,20,20,.08),0 1px 2px rgba(20,20,20,.06);
  --shadow-3:     0 12px 28px rgba(20,20,20,.12),0 2px 6px rgba(20,20,20,.08);
  --shadow:       var(--shadow-3);   /* default "lift" alias */
  --shadow-pop:   0 18px 44px rgba(0,0,0,.22);
  --shadow-modal: 0 30px 80px rgba(0,0,0,.6);

  /* ── Spacing (4px base) ── */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* ── Motion ── */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ── Signature ── */
  --stripe-angle:26deg;
  --stripe-skew:-26deg;

  /* ── Z-index ── */
  --z-nav:40; --z-sidebar:50; --z-modal:120;

  /* ── Layout ── */
  --sidebar-w:236px;
  --content-max:1400px;
  --scroll-offset:112px;

  /* ============================================================
     ALIAS LAYER — design-system / legacy names resolve to canonical.
     Lets brand pages authored with --jr-* / --fg-* auto-reskin.
     ============================================================ */
  --jr-red:var(--red); --jr-red-dark:var(--red-dark);
  --jr-red-gradient:var(--red-gradient); --jr-red-gradient-h:var(--red-gradient-h);
  --jr-black:var(--charcoal); --jr-black-soft:var(--charcoal-soft);
  --jr-gray-dark:var(--steel); --jr-gray-light:var(--border); --jr-white:var(--surface);
  --fg-1:var(--charcoal); --fg-2:var(--steel); --fg-3:var(--mid); --fg-on-dark:var(--on-dark);
  --bg-page:var(--surface); --bg-alt:var(--surface-alt);
  --accent:var(--red); --accent-hover:var(--red-dark); --accent-press:var(--red-press);
  --rule-soft:var(--border-strong); --rule-hairline:var(--border);
}

/* ============================================================================
   DARK MODE — application surfaces flip; permanently-dark bands do NOT.
   Enable with <html data-theme="dark"> or <body class="dark">.
   ============================================================================ */
[data-theme="dark"],
body.dark {
  --red-bg:      rgba(233,42,44,.14);
  --red-bg-soft: rgba(233,42,44,.05);

  --charcoal:      #EDEDED;   /* ink flips light */
  --charcoal-soft: #0d0d0d;
  --steel:         #B9B9B9;
  --mid:           #9A9A9A;
  --muted:         #8A8A8A;
  --border:        #2C2C2C;
  --border-soft:   #222222;
  --border-strong: #3A3A3A;
  --rule-strong:   #000000;

  --off-white:     #0D0D0D;   /* page ground */
  --surface:       #141414;
  --surface-alt:   #1C1C1C;
  --surface-alt-2: #1E1E1E;

  --green-ink: #3FA968;
  --amber-ink: #E0A82E;

  /* Bands, --on-dark, --on-red, gradients, shadows: unchanged (permanently dark). */
}

/* Optional convenience base — safe to delete if the host page owns these. */
/*
body {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
*/