/* ============================================================
   Tally Design System — colors_and_type.css
   Single source of truth for tokens. Import once.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Display: Inter Tight (substituted for Söhne — see README) */
/* Body: Inter */
/* Mono: JetBrains Mono */

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

:root {
  /* ============================================================
     COLOR — Neutrals (warm-cool charcoal ramp, dark-first)
     ============================================================ */
  --bg-0: #0B0D0F;        /* page canvas */
  --bg-1: #14171A;        /* card surface */
  --bg-2: #1C1F23;        /* hover surface, second-level card */
  --bg-3: #24282D;        /* pressed / selected surface */
  --bg-4: #2E3239;        /* high-contrast input fill */

  --fg-0: #FFFFFF;        /* highest contrast — big numbers, hero */
  --fg-1: #E8ECEF;        /* primary text */
  --fg-2: #A8AFB6;        /* secondary text, labels */
  --fg-3: #6B7178;        /* tertiary, captions, dashed rule */
  --fg-4: #3F454B;        /* disabled, faint dividers */

  --border:        #23272C;       /* default card/input border */
  --border-strong: #353A41;       /* hover border, focused field border */

  /* ============================================================
     COLOR — Accent (the one and only)
     ============================================================ */
  --accent:        #7FFF6B;       /* Tally green */
  --accent-hover:  #95FF85;
  --accent-press:  #6CE85B;
  --accent-faint:  rgba(127, 255, 107, 0.10);   /* tinted bg for active row */
  --accent-fg:     #0B0D0F;        /* foreground on accent surfaces (near-black) */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --warn:        #F5C26B;          /* receipt amber */
  --warn-faint:  rgba(245, 194, 107, 0.12);
  --danger:      #FF5C5C;
  --danger-faint:rgba(255, 92, 92, 0.12);
  --info:        #6BB7FF;
  --info-faint:  rgba(107, 183, 255, 0.12);

  /* Trend tokens — mirror semantic but named for data viz */
  --trend-up:    var(--accent);
  --trend-down:  var(--danger);
  --trend-flat:  var(--fg-3);

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-display: 'Inter Tight', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPOGRAPHY — Scale (rem-based, 16px root)
     ============================================================ */
  --fs-display:   56px;        /* hero / marketing */
  --fs-h1:        40px;
  --fs-h2:        28px;
  --fs-h3:        20px;
  --fs-h4:        16px;
  --fs-body:      14px;        /* product default */
  --fs-body-lg:   16px;        /* marketing body */
  --fs-small:     13px;
  --fs-caption:   12px;
  --fs-overline:  11px;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-loose: 0.06em;     /* for overlines */

  /* ============================================================
     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;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-pill:  9999px;

  /* ============================================================
     SHADOWS — used sparingly. Elevation = border + bg-step.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.7);
  --shadow-focus: 0 0 0 2px var(--accent);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --topbar-h:        56px;
  --sidebar-w:       240px;
  --sidebar-w-mini:  56px;
  --content-max:     1400px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);   /* the house ease */
  --dur-fast:  150ms;     /* hover */
  --dur-mid:   220ms;     /* state change, rank flip */
  --dur-slow:  400ms;     /* layout shift */

  /* ============================================================
     SIGNATURE
     ============================================================ */
  --rule-dashed: 1px dashed var(--fg-3);    /* the receipt-tape separator */
}

/* ============================================================
   Light mode (secondary — invert the warm-charcoal ramp)
   Apply via: <html data-theme="light">
   ============================================================ */
[data-theme="light"] {
  --bg-0: #FAFAF7;
  --bg-1: #FFFFFF;
  --bg-2: #F2F2EE;
  --bg-3: #E6E6E1;
  --bg-4: #D6D6D0;

  --fg-0: #000000;
  --fg-1: #14171A;
  --fg-2: #5A6068;
  --fg-3: #8A9098;
  --fg-4: #BFC4CA;

  --border:        #E2E2DD;
  --border-strong: #C9C9C2;

  --accent:        #16A34A;
  --accent-hover:  #15803D;
  --accent-press:  #14532D;
  --accent-faint:  rgba(22, 163, 74, 0.08);
  --accent-fg:     #FFFFFF;
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";   /* Inter's stylistic alts: cleaner 'a' and digits */
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
.t-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-0);
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-0);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-0);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.t-overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  color: var(--fg-3);
}

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss02";
}

.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

a {
  color: var(--fg-1);
  text-decoration-color: var(--fg-3);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ============================================================
   Utility — receipt-tape separator (the brand signature)
   ============================================================ */
.rule-dashed {
  border: 0;
  border-top: var(--rule-dashed);
  margin: var(--space-5) 0;
}

/* ============================================================
   Focus ring
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Scrollbar (subtle, on-brand)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* ============================================================
   Selection
   ============================================================ */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
}