/* ============================================================
   PERSONAL OS — Colors & Type
   A terminal-HUD aesthetic for a personal command-center OS.
   ============================================================ */

/* ---------- FONTS ---------- */
/* Primary: JetBrains Mono — for everything (UI, data, numerals).
   Display italic: Instrument Serif — used sparingly for proper
   names and tagline phrasing ("Good afternoon, *Miles*"). */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* =========================================================
     COLOR TOKENS
     ========================================================= */

  /* ---- Surfaces (deepest → highest) ----
     Backgrounds carry a faint green-black undertone. */
  --surface-void:      #050a07;   /* page bezel / outside frame */
  --surface-base:      #08110b;   /* app background */
  --surface-card:      #0c1812;   /* widget surface */
  --surface-raised:    #112218;   /* hover / focused widget */
  --surface-input:     #0a140e;   /* input fields */
  --surface-overlay:   #0e1a13e6; /* modals, popovers (alpha) */

  /* ---- Hairlines & dividers ----
     Borders are always 1px and dim. The aesthetic favors a
     single hairline over shadows. */
  --line-faint:        #14241a;
  --line:              #1c3527;
  --line-strong:       #2a4d39;
  --line-active:       #4cff8a;   /* selected day, active tab */

  /* ---- Brand greens (mint → terminal) ---- */
  --mint-50:           #e8fff1;
  --mint-100:          #c5f7d7;
  --mint-200:          #8ee8ad;
  --mint-300:          #5fd486;   /* primary brand mint */
  --mint-400:          #3cb868;
  --mint-500:          #1f8f47;
  --mint-600:          #0f6a31;
  --mint-700:          #084d22;
  --mint-800:          #053316;
  --terminal:          #4cff8a;   /* bright HUD green, sparingly */
  --terminal-glow:     #4cff8a40; /* halo / shadow tint */

  /* ---- Secondary accent: amber ----
     Used sparingly as counterpoint to mint — alerts, "today"
     markers, premium / time-of-day signals, brand flourish.
     Never as the primary action color. */
  --amber-100:         #fde9b8;
  --amber-200:         #f8d27a;
  --amber-300:         #f0b94e;   /* primary amber */
  --amber-400:         #d99524;
  --amber-500:         #a86b14;
  --amber-glow:        #f0b94e26;
  --fg-on-amber:       #1b1102;

  /* ---- Foreground (text) ----
     Off-white with a green undertone. Never pure white. */
  --fg-1:              #e6f3ea;   /* primary text + numerals */
  --fg-2:              #b6cdc0;   /* secondary text */
  --fg-3:              #7a948a;   /* tertiary / labels */
  --fg-4:              #4a6358;   /* dimmed / disabled / hints */
  --fg-on-mint:        #04190c;   /* text on mint-300 fill */
  --fg-on-terminal:    #001508;   /* text on terminal green */

  /* ---- Semantic ---- */
  --positive:          var(--mint-300);   /* gains, complete, up */
  --positive-glow:     #5fd48626;
  --negative:          #ff8a6d;            /* loss, error, down */
  --negative-glow:     #ff8a6d22;
  --warning:           #f0c674;            /* warnings, pending */
  --info:              #7ac0e8;            /* info, neutral data */
  --highlight:         #f5d76e;            /* favourited / starred */

  /* ---- Charts / data viz ---- */
  --chart-line:        var(--mint-300);
  --chart-fill:        #5fd48622;
  --chart-grid:        var(--line-faint);
  --chart-axis:        var(--fg-4);

  /* =========================================================
     TYPOGRAPHY TOKENS
     ========================================================= */

  --font-mono:    "JetBrains Mono", "Berkeley Mono", "SF Mono", ui-monospace, monospace;
  --font-serif:   "Instrument Serif", "EB Garamond", Georgia, serif;
  --font-ui:      var(--font-mono);

  /* Numeric type — tabular figures for stable column widths */
  --font-feature-numeric: "tnum" 1, "zero" 1, "cv02" 1;

  /* Sizes — small, dense, terminal-like */
  --text-2xs:   10px;   /* meta IDs, table footnotes */
  --text-xs:    11px;   /* labels (most ALL-CAPS labels) */
  --text-sm:    12px;   /* body small, table cells */
  --text-base:  13px;   /* default body */
  --text-md:    14px;   /* primary UI */
  --text-lg:    16px;   /* section titles */
  --text-xl:    20px;   /* big numerals */
  --text-2xl:   28px;   /* headlines */
  --text-3xl:   40px;   /* large numerals (clock, net worth) */
  --text-4xl:   56px;   /* hero numerals */
  --text-display: 72px; /* feature display */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;   /* default for ALL CAPS labels */
  --tracking-wider:    0.12em;   /* section IDs, eyebrow */
  --tracking-widest:   0.22em;   /* nav tabs */

  /* =========================================================
     SPACING / RADII / SHADOW
     ========================================================= */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  48px;

  --radius-xs: 2px;   /* pills, tiny chips */
  --radius-sm: 4px;   /* buttons, inputs */
  --radius-md: 6px;   /* widgets, cards */
  --radius-lg: 10px;  /* modals */
  --radius-pill: 999px;

  /* The aesthetic largely avoids drop shadows — a hairline +
     surface shift carries elevation. These exist for overlays. */
  --shadow-overlay:    0 16px 48px -8px #00000080, 0 0 0 1px var(--line);
  --shadow-glow-mint:  0 0 0 1px var(--mint-400), 0 0 24px -4px var(--terminal-glow);
  --inset-hairline:    inset 0 0 0 1px var(--line);
  --inset-hairline-active: inset 0 0 0 1px var(--line-active);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     320ms;
}

/* =========================================================
   SEMANTIC TYPE — apply via class or unscoped element
   ========================================================= */

html, body {
  background: var(--surface-base);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: var(--font-feature-numeric);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headlines — used on hero sections, big numerics. */
.t-display {
  font-family: var(--font-mono);
  font-size: var(--text-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Big numeric — clock, net worth, kcal */
.t-numeric-xl {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.t-numeric-lg {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Section headline (greetings, page titles) */
.t-h1 {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 em, .t-h1 i { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.t-h2 {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

/* Eyebrow / widget label  e.g.  "01 · OPERATOR" */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ALL-CAPS label — chips, tabs, inline tags. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Tab label */
.t-tab {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Default paragraph / body */
.t-body {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

/* Small body — used inside dense widgets */
.t-body-sm {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

/* Whisper — tagline, hint text. Italic serif. */
.t-whisper {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--fg-3);
  letter-spacing: 0.005em;
}

/* Mono inline — kbd, key counters, code */
.t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--mint-200);
  background: var(--surface-input);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
}

/* Stat delta — +8.3% or -0.4% */
.t-delta-pos { color: var(--positive); font-variant-numeric: tabular-nums; }
.t-delta-neg { color: var(--negative); font-variant-numeric: tabular-nums; }