/* Trade Journal — base layer.
   Tailwind handles layout and colour; this file holds the theme tokens, the
   type roles, and the chrome Tailwind can't express. */

/* ── Theme tokens ───────────────────────────────────────────
   Colours are stored as raw "r g b" channels so Tailwind can apply opacity
   modifiers to them (bg-gain/10). Solid aliases below are for SVG fills.

   Light is the primary theme: white cards on a white page, separated by
   hairlines rather than shadows, with green reserved for money that went up
   and red for money that went down. Dark is the same layout at night — the
   surfaces darken, the two P&L hues brighten to hold contrast. */

:root,
[data-theme='light'] {
  color-scheme: light;

  --c-ground:       255 255 255;
  --c-panel:        255 255 255;
  --c-panel-2:      247 247 245;
  --c-panel-3:      239 239 236;
  --c-line:         232 232 228;
  --c-line-2:       213 213 207;

  --c-ink:          32 33 31;
  --c-ink-2:        92 94 90;
  --c-ink-3:        138 140 135;
  --c-ink-4:        176 178 172;

  --c-gain:         22 150 74;
  --c-gain-2:       17 116 57;
  --c-loss:         210 51 42;
  --c-loss-2:       166 38 31;

  --c-accent:       22 163 74;
  --c-accent-hover: 17 138 62;
  --c-on-accent:    255 255 255;

  --tint-gain:      0.08;   /* calendar cell wash */
  --tint-loss:      0.07;

  --field-focus-bg: 255 255 255;
  --row-hover:      249 249 247;
  --scrollbar:      214 214 208;
  --scrollbar-hot:  190 190 183;

  --scrim: 30 32 30;
  --scrim-alpha: 0.38;
  --shadow-card:  0 1px 2px rgb(16 18 16 / 0.04);
  --shadow-sheet: 0 24px 60px -14px rgb(16 18 16 / 0.22), 0 2px 8px rgb(16 18 16 / 0.08);
  --shadow-pop:   0 8px 24px -6px rgb(16 18 16 / 0.18);
}

[data-theme='dark'] {
  color-scheme: dark;

  --c-ground:       20 22 21;
  --c-panel:        27 30 28;
  --c-panel-2:      35 39 36;
  --c-panel-3:      44 49 45;
  --c-line:         48 53 49;
  --c-line-2:       68 75 69;

  --c-ink:          236 238 234;
  --c-ink-2:        166 172 165;
  --c-ink-3:        126 133 126;
  --c-ink-4:        94 101 94;

  --c-gain:         63 191 111;
  --c-gain-2:       38 145 82;
  --c-loss:         240 106 94;
  --c-loss-2:       190 66 55;

  --c-accent:       63 191 111;
  --c-accent-hover: 90 208 133;
  --c-on-accent:    16 26 19;

  --tint-gain:      0.13;
  --tint-loss:      0.13;

  --field-focus-bg: 40 45 41;
  --row-hover:      35 39 36;
  --scrollbar:      62 69 63;
  --scrollbar-hot:  82 90 83;

  --scrim: 6 8 7;
  --scrim-alpha: 0.72;
  --shadow-card:  0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sheet: 0 24px 60px -12px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.4);
  --shadow-pop:   0 8px 24px -6px rgb(0 0 0 / 0.6);
}

/* Solid aliases — SVG fill/stroke can't use Tailwind classes. */
:root {
  --ground:  rgb(var(--c-ground));
  --panel:   rgb(var(--c-panel));
  --panel-2: rgb(var(--c-panel-2));
  --line:    rgb(var(--c-line));
  --line-2:  rgb(var(--c-line-2));
  --ink:     rgb(var(--c-ink));
  --ink-2:   rgb(var(--c-ink-2));
  --ink-3:   rgb(var(--c-ink-3));
  --ink-4:   rgb(var(--c-ink-4));
  --gain:    rgb(var(--c-gain));
  --loss:    rgb(var(--c-loss));
  --accent:  rgb(var(--c-accent));
}

[v-cloak] { display: none; }

html { -webkit-text-size-adjust: 100%; }
body {
  text-rendering: optimizeLegibility;
  transition: background-color 200ms ease, color 200ms ease;
}

/* ── Type roles ─────────────────────────────────────────────
   title   : the page masthead — heavy, tight, uppercase
   disp    : card and section headings
   label   : column headers and captions, small and quiet
   num     : every figure, tabular so columns align vertically */

.title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
}

.disp {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
}

/* Table column heads and field captions — small, tracked, quiet. */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  color: var(--ink-3);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Cards ─────────────────────────────────────────────────
   The whole layout is hairline-bordered cards on a flat page. */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-card);
}

/* ── Form controls ─────────────────────────────────────────── */

.field {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.35;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field::placeholder { color: var(--ink-4); }
.field:hover { border-color: var(--ink-4); }
.field:focus {
  outline: none;
  border-color: var(--accent);
  background: rgb(var(--field-focus-bg));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.13);
}
.field:disabled { opacity: 0.45; cursor: not-allowed; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8C87' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 1.75rem;
}

textarea.field { resize: vertical; min-height: 5rem; }

/* Kill the browser's built-in number spinners — they fight tabular figures */
.field[type='number']::-webkit-outer-spin-button,
.field[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field[type='number'] { -moz-appearance: textfield; }

/* The date picker ships a dark glyph; only the dark theme needs it inverted. */
[data-theme='dark'] .field[type='datetime-local']::-webkit-calendar-picker-indicator,
[data-theme='dark'] .field[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.72);
}
.field[type='datetime-local']::-webkit-calendar-picker-indicator,
.field[type='date']::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ── Focus: always visible, never removed ──────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.field:focus-visible { outline: none; }

/* ── Surfaces ──────────────────────────────────────────────── */

.scrim { background: rgb(var(--scrim) / var(--scrim-alpha)); }
.shadow-sheet { box-shadow: var(--shadow-sheet); }
.shadow-pop { box-shadow: var(--shadow-pop); }

/* ── Scrollbars ────────────────────────────────────────────── */

.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--scrollbar)) transparent; }
.scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: rgb(var(--scrollbar));
  border-radius: 99px;
  border: 2px solid var(--panel);
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: rgb(var(--scrollbar-hot)); }

/* ── Table chrome ──────────────────────────────────────────── */

.sticky-head th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
}

.row-link { transition: background 100ms ease; }
.row-link:hover { background: rgb(var(--row-hover)); }

/* ── Calendar cell washes ──────────────────────────────────── */

.cell-gain { background: rgb(var(--c-gain) / var(--tint-gain)); }
.cell-loss { background: rgb(var(--c-loss) / var(--tint-loss)); }

/* ── The R-tape ────────────────────────────────────────────── */

.tape-bar { transition: opacity 120ms ease; }
.tape:hover .tape-bar { opacity: 0.4; }
.tape .tape-bar.is-hot { opacity: 1; }

/* ── Motion ────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes draw { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

.anim-rise { animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade { animation: fade 160ms ease both; }
.anim-sheet { animation: scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-draw { animation: draw 420ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center; }

.stagger > * { animation: rise 340ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}