/* =========================================================
   Design tokens + base styles, shared across all pages.
   Load this FIRST, before any page-specific stylesheet.
   Decision: see conversation around IBM Plex + navy + sharp
   rectangles + burnt sienna/teal accents.
   ========================================================= */

:root {
  /* Color */
  --c-navy:        #1E3A5F;
  --c-navy-soft:   rgba(30, 58, 95, 0.08);
  --c-navy-border: rgba(30, 58, 95, 0.18);
  --c-navy-tint:   rgba(30, 58, 95, 0.04);
  --c-bg-1:        #F7F8FB;
  --c-bg-2:        #F5F6F8;
  --c-bg-3:        #EEF1F6;
  --c-tile:        rgba(255, 255, 255, 0.95);
  --c-text:        #1E3A5F;
  --c-muted:       #8E8E8E;
 --c-up:          #5C8A5F;  /* sage — gains */
  --c-down:        #A0522D;  /* burnt sienna — losses */
  --c-danger:      #A0522D;

  /* Typography */
  --f-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  
    /* Breakpoints (for reference in media queries — not directly usable
     in @media, but documented here as the single source of truth) */
  /* --bp-mobile:  up to 599px */
  /* --bp-tablet:  600px to 1023px */
  /* --bp-desktop: 1024px and up */

  /* Z-index scale */
  --z-base:     1;
  --z-toggle:   10;
  --z-panel:    100;
  --z-toast:    200;
  
  
  
}

/* =========================================================
   Base reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: linear-gradient(138deg, var(--c-bg-1) 0%, var(--c-bg-2) 30%, var(--c-bg-3) 100%);
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Shared primitive: tile (used by login card, todo card,
   dashboard tiles). Sharp rectangles, no shadow.
   ========================================================= */

.tile {
  background: var(--c-tile);
  border: 1px solid var(--c-navy-border);
}

/* =========================================================
   Shared primitive: label (small uppercase letterspaced)
   ========================================================= */

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* =========================================================
   Shared primitive: button (filled navy rectangular)
   ========================================================= */

.btn-primary {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-bg-1);
  background: var(--c-navy);
  border: none;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: background 120ms ease;
}

.btn-primary:hover  { background: #16304f; }
.btn-primary:active { background: #0f2640; }

/* =========================================================
   Focus styles — visible and consistent for a11y
   ========================================================= */

:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

/* =========================================================
   Screen reader-only — for a11y labels we don't want visible
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}