/*
 * Hedgeye design tokens.
 *
 * Extracted from docs/design/hedgeye/project/Hedgeye Prototype.html and
 * ds-foundations.jsx. Single source of truth for both admin-ui and the
 * customer portal — apps include this stylesheet and reference custom
 * properties (var(--hg-red), var(--font-sans), etc.) rather than
 * redeclaring colors.
 *
 * If/when Hedgeye redesigns, the bundle in docs/design/ updates and we
 * re-extract this file; nothing else changes.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Brand */
  --hg-red:      #E11D2C;
  --hg-red-700:  #B0151F;
  --hg-red-50:   #FCE9EB;
  --hg-blue:     #2A6FDB;
  --hg-blue-700: #1F54A8;
  --hg-blue-50:  #E8F0FB;

  /* Ink scale (warm charcoal neutrals) */
  --ink-0:   #0B0D10;
  --ink-1:   #14171C;
  --ink-2:   #1F242B;
  --ink-3:   #2C333C;
  --ink-4:   #4A525E;
  --ink-5:   #6B7480;
  --ink-6:   #98A0AB;
  --ink-7:   #C7CCD3;
  --ink-8:   #E6E8EC;
  --ink-9:   #F2F3F5;
  --ink-10:  #F8F9FA;
  --paper:   #FFFFFF;

  /* Semantic / data */
  --gain:    #1F8A5B;
  --gain-50: #E6F3EC;
  --loss:    var(--hg-red);
  --loss-50: var(--hg-red-50);
  --warn:    #C97A0A;
  --info:    var(--hg-blue);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(11, 13, 16, .06), 0 1px 1px rgba(11, 13, 16, .04);
  --shadow-2: 0 4px 12px rgba(11, 13, 16, .08), 0 1px 2px rgba(11, 13, 16, .04);
  --shadow-3: 0 12px 32px rgba(11, 13, 16, .12), 0 2px 6px rgba(11, 13, 16, .06);

  /* Type */
  --font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Brand chrome — header / ticker / footer; ALWAYS near-black */
  --chrome-bg:   #0B0D10;
  --chrome-fg:   #FFFFFF;
  --chrome-mute: #98A0AB;
  --chrome-line: #1F242B;

  /* Light-mode semantic surface tokens (default theme) */
  --surface:   #FFFFFF;
  --surface-2: #F8F9FA;
  --fg-1: #14171C;
  --fg-2: #2C333C;
  --fg-3: #4A525E;
  --fg-4: #6B7480;
  --line:   #E6E8EC;
  --line-2: #C7CCD3;

  /* Spacing scale (4px base) — exposed as tokens for pages that prefer
     tokens to literals. Direct literals are also fine for one-offs. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii — kept tight; Hedgeye reads as serious infrastructure */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
}

/* Dark mode (opt-in via html[data-theme="dark"]). Chrome stays dark in both. */
html[data-theme="dark"] {
  --paper:     #0B0D10;
  --surface:   #14171C;
  --surface-2: #1F242B;
  --fg-1: #F2F3F5;
  --fg-2: #C7CCD3;
  --fg-3: #98A0AB;
  --fg-4: #6B7480;
  --line:   #1F242B;
  --line-2: #2C333C;
}

/* Base resets shared by both surfaces */
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 200ms ease, color 200ms ease;
}
* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--hg-red); color: #fff; }

/* Type scale (utility classes; matches ds-foundations.jsx Type table) */
.t-display  { font-size: 56px; font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
.t-h1       { font-size: 36px; font-weight: 700; line-height: 1.1;  letter-spacing: -0.02em; }
.t-h2       { font-size: 24px; font-weight: 700; line-height: 1.2;  letter-spacing: -0.01em; }
.t-h3       { font-size: 18px; font-weight: 600; line-height: 1.3;  letter-spacing: -0.005em; }
.t-body-l   { font-size: 16px; font-weight: 400; line-height: 1.55; }
.t-body     { font-size: 14px; font-weight: 400; line-height: 1.55; }
.t-caption  { font-size: 12px; font-weight: 500; line-height: 1.4;  letter-spacing: .01em; }
.t-eyebrow  { font-size: 11px; font-weight: 500; line-height: 1.4;  letter-spacing: .14em;
              text-transform: uppercase; font-family: var(--font-mono); color: var(--fg-3); }
.t-mono     { font-family: var(--font-mono); }

/* Button primitives — match ds-components.jsx Btn behavior */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-2);
  cursor: pointer; user-select: none;
}
.btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn--lg { height: 46px; padding: 0 22px; font-size: 14px; }

.btn--primary   { background: var(--hg-red);  color: #fff;        border-color: var(--hg-red); }
.btn--primary:hover  { background: var(--hg-red-700); border-color: var(--hg-red-700); }
.btn--secondary { background: var(--paper);   color: var(--ink-1); border-color: var(--ink-7); }
.btn--ghost     { background: transparent;    color: var(--ink-1); border-color: transparent; }
.btn--dark      { background: var(--ink-0);   color: #fff;        border-color: var(--ink-0); }
.btn--link      { background: transparent;    color: var(--hg-blue); border-color: transparent;
                  text-transform: none; text-decoration: underline; }
.btn--danger    { background: var(--hg-red-700); color: #fff;     border-color: var(--hg-red-700); }
.btn[disabled]  { background: var(--ink-8); color: var(--ink-6); border-color: var(--ink-8);
                  cursor: not-allowed; }