/* ==========================================================================
   Design tokens
   Theme switching: [data-theme="dark"] / [data-theme="light"] on <html>,
   always set - "follow the system" is resolved to one of the two by the
   inline script in index.html's <head> and kept current by
   TJ.Store.applyTheme().
   ========================================================================== */

/* Figures in Inter (since 2026-09-27, operator: "czcionki liczb muszą być
   prostsze i bardziej czytelne"). The face covers ONLY digits and the signs
   that travel with them, and is listed first in every text stack: the
   browser takes those characters from it and everything else from the next
   face - so every number in the app, in either look, in a table, a figure or
   an input, is drawn in Inter without a single component knowing (Chart.js
   canvas labels keep their own fonts). The comma, full stop and colon are
   left out: they are in every sentence, and in a figure the digits carry
   it. The hyphen stays - it is the minus sign TJ.Format writes. Inter has
   tabular figures, so tabular-nums keeps working. Latin subset only, local
   file (G-27: no network). OFL, fonts/inter/OFL.txt. */
@font-face {
  font-family: "TB Figures";
  src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0024-0025, U+002B, U+002D, U+0030-0039, U+00A3, U+20AC, U+2212;
}

/* Inter for the letters too (stage 1 of the new look, 2026-10-17): the same
   OFL file as "TB Figures", without the unicode-range, so Windows, a Mac and
   an iPhone draw one typeface. It is listed after "TB Figures" in both
   stacks: the digits still come from the face above, everything else from
   this one. No new file; local, so no network (G-27). */
@font-face {
  font-family: "TB Text";
  src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Typography ---- */
  /* "Segoe UI Variable Text" ahead of "Segoe UI": it ships with Windows 11
     (so this costs no download and still works from file://) and is the
     later, optically-sized cut of the same typeface - noticeably cleaner at
     UI sizes than the static Segoe UI it replaces. macOS/iOS keep
     -apple-system first, so nothing changes there. */
  --font-family: "TB Figures", "TB Text", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, sans-serif;
  /* Display cut for headings and KPI values: same family, drawn for large
     sizes - tighter spacing and finer joins where the text is big enough to
     show them. Falls back to the text stack everywhere it does not exist. */
  --font-family-display: "TB Figures", "TB Text", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "SF Mono", "Menlo", "Consolas", monospace;

  /* Content sizes stay fixed; only the display sizes (title1 / large /
     hero) are fluid. Since the readability pass (2026-09-28) labels and
     hints are 13px and secondary text 14px - the operator read the app for
     hours and found it hard work at 11-12px. Only tags and marks inside a
     graphic go below (12-12.5px). */
  --fs-caption: 0.8125rem;  /* 13px - labels, hints */
  --fs-footnote: 0.875rem;  /* 14px - secondary content */
  --fs-body: 0.9375rem;     /* 15px */
  --fs-callout: 1.0625rem;  /* 17px */
  --fs-title3: 1.25rem;     /* 20px */
  --fs-title2: 1.5rem;      /* 24px */
  --fs-title1: clamp(1.5rem, 1.31rem + 0.6vw, 1.75rem);   /* 24 -> 28px (was fixed 30px) */
  --fs-large: clamp(1.75rem, 1.35rem + 1.25vw, 2.25rem);  /* 28 -> 36px (was fixed 40px) */
  --fs-hero: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);        /* 32 -> 44px (was fixed 52px) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Figures (2026-09-28): a large figure at 500 with a light negative
     tracking, a small value (under ~28px) at 600 - regular-weight digits
     tracked at -0.045em ran together. */
  --fw-figure: 500;
  --ls-figure: -0.03em;
  --fs-figure: 56px; /* the key figure of the account page, Analytics and Planner; Portfolio's hero (72px / 300, the operator 6.11: 104px shouted) is the one exception */
  --fw-value: 600;
  --ls-value: -0.01em;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Density ----
     One density on every device (the setting was removed 2026-09-27). The
     Compact values it fixed were undone on 2026-09-28: windows 16px apart
     with 16px inside read as a crowd. data-density="compact" is still set
     on <html> and nothing reads it. */
  --card-pad: var(--space-6);
  --row-h: 44px;
  --stack-gap: var(--space-5);
  --section-gap: var(--space-8);

  /* ---- Radius scale ---- */
  /* The concentric set only: desk 28, window 22, tile / field 12, small
     field and tag 10, capsule 999, circle 50%. The older names stay so a
     stylesheet keeps working, but each one now points into that set. */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  /* Motion is 0.25 s at most; the two long steps are kept as names for the stylesheets that use them. */
  --dur-slow: 240ms;
  --dur-slower: 240ms;

  /* ---- Layout ---- */
  --sidebar-width: 248px;
  --topbar-height: 64px;
  /* The operator 21.10: a maximised window keeps only the frame around the
     card, so the column grows with the screen up to a 2560px monitor. */
  --content-max-width: 2560px;

  /* ---- Z-index ---- */
  --z-sidebar: 100;
  --z-topbar: 90;
  /* Below the modal pair on purpose: the Trade Detail drawer has to stay
     open underneath the Edit / Delete dialogs it launches. */
  --z-drawer-backdrop: 450;
  --z-drawer: 460;
  --z-modal-backdrop: 500;
  --z-modal: 510;
  --z-dropdown: 520;
  --z-toast: 600;

  /* ---- Semantic colors (theme independent) ----
     Same hues and the same meanings as before, pulled back roughly 20% in
     saturation. The intent is a slightly quieter surface, not a different
     language: profit is still unmistakably green, loss unmistakably red,
     and the accent unmistakably blue. */
  --color-profit: #45c169;
  --color-profit-soft: rgba(69, 193, 105, 0.13);
  --color-loss: #ec5b52;
  --color-loss-soft: rgba(236, 91, 82, 0.13);
  --color-warning: #e79c2a;
  --color-warning-soft: rgba(231, 156, 42, 0.13);
  --color-accent: #3389e0;
  --color-accent-soft: rgba(51, 137, 224, 0.13);
  --color-accent-rgb: 51, 137, 224;
  /* Foreground on top of --color-accent (primary buttons, FAB). Flips in
     the minimal palette, where the accent becomes a near-white/near-black
     neutral instead of blue. */
  --color-on-accent: #ffffff;
  /* The accent as a FILL under --color-on-accent text (primary button, FAB,
     ticked checkbox). A shade deeper than --color-accent, which stays the
     text/stroke colour: white on #3389e0 is 3.62:1, below AA for the 15px
     button label; on #2a6fc0 it is 5.08:1. */
  --color-accent-fill: #2a6fc0;

  /* ---- Chart series colours ----
     A chart is not a P&L figure. A number coloured green/red is read one
     value at a time, so luminance alone separates them and the minimal
     palette can drop the hue. A curve is read as a SHAPE across a whole
     card, and a white line on a dark card is just the default stroke - it
     carries no identity at all, which is what made the charts the one part
     of minimal that looked unfinished rather than restrained.
     So chart series get their own pair, aliased to profit/loss by default
     and re-pointed at the accent in minimal. Nothing else in the app reads
     these, and no view's data logic changes - only which token it asks for. */
  --chart-positive: var(--color-profit);
  --chart-negative: var(--color-loss);

  /* ---- Categorical series (All Accounts comparison chart) ----
     A different job from --chart-positive/--chart-negative: those two encode
     DIRECTION, these encode IDENTITY. One account's curve is not "good" or
     "bad", it is simply that account's, so none of these may be a semantic
     colour the reader has already learned to read as profit or loss - which
     is why neither the loss red nor the profit green is in the ramp (Etap 6:
     the profit green used to be slot 2, so a second account read as "this
     one is winning" before a single number was read).
     These are also the account colours: the account tile's bar, its dot, its
     line (Etap 6.1 assigns them by position; 6.4 lets the trader pick one).
     Ordered for maximum separation at small counts: most fleets are 2-4
     accounts, so the first four are the four furthest apart on the wheel. */
  --acct-1: var(--color-accent);
  --acct-2: #8a72e3;
  --acct-3: #3fb6c4;
  --acct-4: #e79c2a;
  --acct-5: #d9738f;
  --acct-6: #5b6ee8;
  --acct-7: #b86fd0;
  --acct-8: #8b96a8;
}

/* ==========================================================================
   v12 (operator-confirmed 2026-10-15, dev/mockups/redesign/v12.html,
   docs/REDESIGN-PLAN.md), colours and type of the new look from 2026-10-17
   (docs/PROPOZYCJA-WYGLADU-2026-10-17.md; Apple system greys and colours).
   One look, one palette, both themes. Four layers carry the depth: the
   canvas (the body), the windows recessed a step into it, the desk raised
   above them (with a lit top edge and a long shadow, css/components/desk.css)
   and the tiles on top. No gradients, no ambient wash, no shadow on a resting
   window; only the desk and the floating layers (dropdowns, panels, sheets,
   toasts) cast one.

   Meaning colours never change with the lead colour: profit green, loss
   red, warning (limits from 75%) orange, open risk blue. The lead colour
   (--color-accent) is the user's choice of ten (Settings > Appearance,
   data-acc on <html>, TJ.Store.setAccent): the main button, the active
   menu item, links, focus and selected options (account lines keep the account colour). Sea glass is the default and
   sets no attribute.

   The older names (--tb-window, --surface-gradient,
   --app-ambient ...) are kept and pointed at v12 values, so the stylesheets
   of views not yet rebuilt keep working; they go when their view is rebuilt
   (REDESIGN-PLAN section 5, steps 4-6).

   <html> always carries data-theme: js/boot/theme-early.js resolves
   "follow the system" before the first paint and TJ.Store.applyTheme()
   keeps it current, so there is no prefers-color-scheme copy here.
   ========================================================================== */

/* ---- Dark (default) ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* v12 names - new components read these. */
  /* Layers, back to front: canvas (the body) < page < window (recessed) <
     desk (raised, with the top bar) < tile < tile-2. */
  --canvas: #060607;
  --page: #0a0a0b;
  --window: #121215;
  --desk: #1d1d20;
  --desk-hi: #1d1d20;
  --tile: #26262a;
  --tile-2: #313136;
  /* A tile inside a window (the window is recessed, so it is one step lighter
     than the window - in dark that is --tile, in light --tile-2: --tile is the
     window's own colour there). */
  --win-tile: var(--tile);
  --window-quiet: var(--window);
  --line: rgba(255, 255, 255, 0.1);
  --track: rgba(255, 255, 255, 0.1);
  --text-1: #f5f5f7;
  --text-2: #a8a8af;
  --text-3: #8e8e93;
  /* The top menu's words at rest and lit: greys, never the accent (the operator 6.11). */
  --nav-rest: var(--text-2);
  --nav-on: #e2e2e7;
  --gain: #3bd47a;
  --loss: #ff6b62;
  --warn: #ffb340;
  --open: #8280ff; /* approved #7d7aff was 4.38:1 on a tile */
  --lead: #64d2ff;
  --lead-rgb: 100, 210, 255;
  --on-lead: #002b3d;
  --undo-bg: #f5f5f7;
  --undo-fg: #0a0a0b;
  --loss-on-inverse: #d1001c; /* the light theme's red, for the light bar of a toast */

  /* The app's tokens, mapped onto v12. */
  --color-bg: var(--canvas);
  --color-bg-elevated: var(--window);
  --color-surface: var(--desk);
  --color-surface-raised: var(--desk-hi);
  --color-surface-hover: var(--tile);
  --color-border: var(--line);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  --color-text-primary: var(--text-1);
  --color-text-secondary: var(--text-2);
  --color-text-tertiary: var(--text-3);

  --color-profit: var(--gain);
  --color-profit-soft: rgba(59, 212, 122, 0.13);
  --color-loss: var(--loss);
  --color-loss-soft: rgba(255, 107, 98, 0.13);
  --color-warning: var(--warn);
  --color-warning-soft: rgba(255, 179, 64, 0.13);

  --color-accent: var(--lead);
  --color-accent-rgb: var(--lead-rgb);
  --color-accent-soft: rgba(var(--lead-rgb), 0.13);
  --color-accent-fill: var(--lead);
  --color-on-accent: var(--on-lead);

  /* Account identity colours stay as they were: they are the trader's
     choice per account, not part of the theme. Slot 1 is pinned (it used
     to follow the accent). */
  --acct-1: #3389e0;

  --surface-gradient: none;
  --app-ambient: none;
  --glass-bg: rgba(29, 29, 32, 0.82);
  --glass-border: var(--line);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: var(--shadow-lg);
  --surface-highlight: transparent;
  --surface-lowlight: transparent;

  /* Windows (the look layer's names). */
  --tb-window: var(--desk);
  --tb-window-image: none;
  --tb-window-2: var(--tile);
  --tb-window-shadow: none;
  --tb-window-shadow-hover: none;
  --tb-open: var(--open);

  --scrollbar-thumb: rgba(255, 255, 255, 0.16);
}

/* ---- Light ---- */
:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #e9e9ed;
  --page: #f5f5f7;
  --window: #f4f4f6;
  --desk: #ffffff;
  --desk-hi: #ffffff;
  --tile: #f5f5f7;
  --tile-2: #e8e8ed;
  --win-tile: var(--tile-2);
  --window-quiet: var(--window);
  --line: rgba(0, 0, 0, 0.08);
  --track: rgba(0, 0, 0, 0.07);
  --text-1: #1d1d1f;
  --text-2: #424245;
  --text-3: #68686d; /* approved #6e6e73 was 4.19:1 on the canvas */
  --nav-rest: var(--text-3);
  --nav-on: #2e2e32;
  /* The meaning colours read as text on the desk, the windows, the tiles and
     the bare page at 4.5:1 or more (dev/contrast-v12.mjs). */
  --gain: #1a7837; /* approved #1a7f37 was 4.19:1 on the canvas */
  --loss: #d1001c;
  --warn: #a65200;
  --open: #4b47d6;
  --lead: #0066cc;
  --lead-rgb: 0, 102, 204;
  --on-lead: #ffffff;
  --undo-bg: #1d1d1f;
  --undo-fg: #f5f5f7;
  --loss-on-inverse: #ff6961;

  --color-border-strong: rgba(0, 0, 0, 0.14);
  --color-profit-soft: rgba(26, 127, 55, 0.1);
  --color-loss-soft: rgba(209, 0, 28, 0.09);
  --color-warning-soft: rgba(166, 82, 0, 0.1);
  --acct-1: #2468b5;

  --glass-bg: rgba(255, 255, 255, 0.84);
  --shadow-lg: 0 1px 2px rgba(16, 22, 36, 0.06), 0 16px 40px -8px rgba(16, 22, 36, 0.18);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
}

/* ---- Lead colours (data-acc; Sea glass is the default above) ---- */
:root[data-acc="heather"] { --lead: #b9a7ec; --lead-rgb: 185, 167, 236; --on-lead: #191230; }
:root[data-acc="heather"][data-theme="light"] { --lead: #6650bf; --lead-rgb: 102, 80, 191; --on-lead: #ffffff; }
:root[data-acc="champagne"] { --lead: #e3d2ae; --lead-rgb: 227, 210, 174; --on-lead: #211b0f; }
:root[data-acc="champagne"][data-theme="light"] { --lead: #7b6232; --lead-rgb: 123, 98, 50; --on-lead: #ffffff; }
:root[data-acc="platinum"] { --lead: #e4e7ea; --lead-rgb: 228, 231, 234; --on-lead: #15171a; }
:root[data-acc="platinum"][data-theme="light"] { --lead: #2b2f34; --lead-rgb: 43, 47, 52; --on-lead: #ffffff; }
:root[data-acc="cobalt"] { --lead: #86aeff; --lead-rgb: 134, 174, 255; --on-lead: #0a1a3f; }
:root[data-acc="cobalt"][data-theme="light"] { --lead: #1f4fd1; --lead-rgb: 31, 79, 209; --on-lead: #ffffff; }
:root[data-acc="lagoon"] { --lead: #62d8c6; --lead-rgb: 98, 216, 198; --on-lead: #06302a; }
:root[data-acc="lagoon"][data-theme="light"] { --lead: #0b7468; --lead-rgb: 11, 116, 104; --on-lead: #ffffff; }
:root[data-acc="orchid"] { --lead: #dca6ec; --lead-rgb: 220, 166, 236; --on-lead: #2a1233; }
:root[data-acc="orchid"][data-theme="light"] { --lead: #8a3fa3; --lead-rgb: 138, 63, 163; --on-lead: #ffffff; }
:root[data-acc="rose"] { --lead: #f4a9c4; --lead-rgb: 244, 169, 196; --on-lead: #38101f; }
:root[data-acc="rose"][data-theme="light"] { --lead: #b1336a; --lead-rgb: 177, 51, 106; --on-lead: #ffffff; }
:root[data-acc="copper"] { --lead: #e2ad8e; --lead-rgb: 226, 173, 142; --on-lead: #32190c; }
:root[data-acc="copper"][data-theme="light"] { --lead: #96562f; --lead-rgb: 150, 86, 47; --on-lead: #ffffff; }
:root[data-acc="slate"] { --lead: #aebccf; --lead-rgb: 174, 188, 207; --on-lead: #151c26; }
:root[data-acc="slate"][data-theme="light"] { --lead: #44546a; --lead-rgb: 68, 84, 106; --on-lead: #ffffff; }

/* Swatches in Settings show every choice in the current theme, whatever is
   chosen. */
:root { --sw-seaglass: #64d2ff; --sw-heather: #b9a7ec; --sw-champagne: #e3d2ae; --sw-platinum: #e4e7ea; --sw-cobalt: #86aeff; --sw-lagoon: #62d8c6; --sw-orchid: #dca6ec; --sw-rose: #f4a9c4; --sw-copper: #e2ad8e; --sw-slate: #aebccf; }
:root[data-theme="light"] { --sw-seaglass: #0066cc; --sw-heather: #6650bf; --sw-champagne: #7b6232; --sw-platinum: #2b2f34; --sw-cobalt: #1f4fd1; --sw-lagoon: #0b7468; --sw-orchid: #8a3fa3; --sw-rose: #b1336a; --sw-copper: #96562f; --sw-slate: #44546a; }