/* tokens.css: the v2 design tokens (VISUAL-SPEC v3, mockup "stocks":
   design-reset/mockups-v2/stocks/NOTES.md "Tokens used" is the source).
   Components, screens and chart code use ONLY these custom properties; no
   literal colour, font size, radius, duration or z-index outside this file.
   Surfaces are flat colours. Depth comes from flat greys (#000, #1c1c1e,
   #2c2c2e), never from shadows or shading. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #000000;                 /* canvas */
  --cell: #1C1C1E;               /* grouped section, sheet, sidebar */
  --cell-2: #2C2C2E;             /* cell on a sheet, selected sidebar item */
  --cell-3: #3A3A3C;             /* pressed cell on a sheet */
  --fill: rgba(118, 118, 128, 0.24);     /* selected period, Same, secondary capsule */
  --fill-1: rgba(120, 120, 128, 0.36);   /* grabber, switch track */
  --fill-2: rgba(118, 118, 128, 0.18);   /* hover, skeleton */
  --fill-white: rgba(255, 255, 255, 0.12);
  --material: rgba(28, 28, 30, 0.94);    /* sheet header band */
  --material-solid: #1C1C1E;
  --scrim: rgba(0, 0, 0, 0.40);

  /* glass: floating controls only (nav capsule and circles, sheet header
     buttons, tab bar, chips, toasts). One flat tint + blur + saturate, a
     0.5 px rim at 12 % white. No shadow, no bright rim. */
  --glass-tint: rgba(44, 44, 48, 0.68);
  --glass-tint-strong: rgba(44, 44, 48, 0.78);   /* tab bar */
  --glass-tint-bar: rgba(0, 0, 0, 0.88);         /* scroll band under the nav bar */
  --glass-tint-thin: rgba(255, 255, 255, 0.08);  /* hover on glass */
  --glass-lens: rgba(255, 255, 255, 0.12);       /* selected tab pill */
  --glass-thumb: var(--fill);
  --glass-press: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;
  --glass-blur-thick: 20px;
  --glass-blur-thin: 12px;
  --glass-saturate: 160%;
  --glass-brightness: 1;
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  --glass-filter-thick: blur(var(--glass-blur-thick));
  --glass-filter-thin: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  --glass-rim: rgba(255, 255, 255, 0.12);
  --glass-rim-top: var(--glass-rim);
  --glass-rim-top-active: rgba(255, 255, 255, 0.20);
  --glass-rim-bottom: var(--glass-rim);
  --glass-shadow: 0 0 0 transparent;
  --glass-shadow-thick: 0 0 0 transparent;
  --glass-shadow-soft: 0 0 0 transparent;
  --glass-rim-shadow: inset 0 0 0 var(--hairline) var(--glass-rim);
  --glass-rim-shadow-active: inset 0 0 0 var(--hairline) var(--glass-rim-top-active);

  /* labels */
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, 0.60);
  --label-3: rgba(235, 235, 245, 0.30);
  --label-4: rgba(235, 235, 245, 0.16);
  --sep: rgba(84, 84, 88, 0.60);

  /* semantic: blue only on the caret, a selected state or a link; green/red
     only on gain/loss numbers */
  --tint: #0091FF;
  --pos: #30D158;
  --neg: #FF4245;
  --warn: #FF9230;
  --on-tint: #FFFFFF;
  /* the one primary action: white capsule, black label */
  --primary-bg: #FFFFFF;
  --on-primary: #000000;
  --primary-disabled: 0.4;

  /* data: one hue per category, lightness steps per account */
  --c-bourse-1: #0091FF; --c-bourse-2: #4DA9FF; --c-bourse-3: #85C3FF; --c-bourse-4: #B8DCFF;
  --c-epargne-1: #63E6E2; --c-epargne-2: #3FB8B4; --c-epargne-3: #2A8A87;
  --c-immo-1: #AC8E68; --c-immo-2: #C9AE8A;
  --c-autre-1: #BF5AF2; --c-autre-2: #DA8FFF;
  --chart-grid: rgba(84, 84, 88, 0.60);
  --chart-axis: rgba(235, 235, 245, 0.60);
  --chart-invested: rgba(235, 235, 245, 0.30);
  /* what you added (contributions, the invested line): indigo, apart from the
     gain/loss green and red and from the account hues; 7.3:1 on --bg, 6.0:1
     on --cell, 4.9:1 on --cell-2, so it also reads as label text */
  --chart-added: #8E8CFF;
  /* the value line of the main line charts: brighter than the --pos/--neg
     text colours, with a soft glow of the same colour (charts.css) */
  --pos-line: #1EF08A;
  --neg-line: #FF4D5E;
  --viz-net-stroke-m: 2.75px;   /* value line on the M and L tiers */
  --viz-inv-dash: 1 4;          /* the dotted invested line */
  --viz-glow: 4px;              /* blur of the value line's glow */
  --viz-glow-mix: 55%;          /* its strength */
  --chart-band-pos: rgba(48, 209, 88, 0.08);
  --chart-band-neg: rgba(255, 66, 69, 0.08);
  --chart-neutral: rgba(235, 235, 245, 0.30);
  /* surface under a chart (charts.css and screens override it per surface) */
  --chart-halo: var(--bg);
  --viz-future-dim: 0.3;      /* future part of a scrubbed chart */
  --viz-seg-dim: 0.35;        /* non-highlighted segments */
  --viz-fill: 0.08;           /* flat fill under the net line */
  --viz-grad-bottom: 0.08;    /* legacy name of --viz-fill */

  /* chart geometry (b1-viz, b2-viz2). js/v2/viz publishes the same --viz-*
     values; these are the tokens CSS reads when the chart code has not run. */
  --viz-band-h: 214px;        /* M-tier band chart */
  --viz-band-h-sheet: 214px;  /* band chart inside a sheet */
  --chart-h-sheet: var(--viz-band-h-sheet);
  --viz-spark-w: 60px; --viz-spark-h: 28px;
  --viz-net-stroke: 2px; --viz-inv-stroke: 1.5px; --viz-spark-stroke: 1.5px;
  --viz-dot-r: 5px; --viz-dot-ring: 2px;
  --viz-bar100-h: 8px; --viz-bar100-gap: 2px;
  --viz-target-w: 2px; --viz-target-out: 3px;
  --viz-gauge-w: 60px; --viz-gauge-h: 8px; --viz-gauge-gap: 3px;
  --viz-bullet-h: 8px; --viz-bullet-tick-h: 16px;
  --viz-label-gap: 4px; --viz-label-halo: 4px;
  --viz-grid-dash: 1 3;
  --viz-band-proj-dash: 4 3;
  --viz-hbar-h: 12px; --viz-hbar-min: 2px; --viz-row-h: 28px;
  --viz-dot-d: 8px; --viz-stem-w: 2px; --viz-chip-d: 8px; --viz-legend-h: 28px;
  --viz-line-w: 1px; --viz-ring-w: 2px;
  --viz-avg-dash: 3 3;
  --viz-proj-dash: 2 2;
  --viz-label-pad: 3px;       /* padding of the plate behind an axis label */
  --viz-bar-r: 2px;           /* bar corner radius, max */

  /* type: the system font only (SF Pro on Apple devices) */
  --font: -apple-system, system-ui, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --rounded: var(--font);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* text styles: size / line-height / tracking */
  --t-hero: 700 56px/60px var(--font);          --tr-hero: -0.025em;
  --t-hero-sheet: 700 44px/50px var(--font);
  --t-hero-desktop: 700 56px/60px var(--font);
  --t-large-title: 700 34px/41px var(--font);   --tr-large-title: -0.01em;
  --t-title1: 700 28px/34px var(--font);        --tr-title1: 0.36px;
  --t-title2: 700 22px/28px var(--font);        --tr-title2: 0.35px;
  --t-title3: 600 20px/25px var(--font);        --tr-title3: 0.38px;
  --t-headline: 600 17px/22px var(--font);      --tr-headline: -0.41px;
  --t-body: 400 17px/22px var(--font);          --tr-body: -0.41px;
  --t-callout: 400 16px/21px var(--font);       --tr-callout: -0.32px;
  --t-subhead: 400 15px/20px var(--font);       --tr-subhead: -0.24px;
  --t-secondary: 400 15px/20px var(--font);     --tr-secondary: -0.24px;
  --t-footnote: 400 13px/18px var(--font);      --tr-footnote: -0.08px;
  --t-caption1: 400 12px/16px var(--font);      --tr-caption1: 0px;
  --t-caption2: 400 11px/13px var(--font);      --tr-caption2: 0.07px;
  --t-tab: 600 10px/12px var(--font);           --tr-tab: 0.1px;
  --t-key: 400 25px/26px var(--font);

  /* icons */
  --icon: 24px;
  --icon-glass: 20px;        /* glyph inside a 44 px glass circle */
  --icon-tab: 26px;
  --icon-sidebar: 22px;
  --icon-chevron: 22px;
  --icon-stroke: 1.8;
  --focus-ring: 2px;
  --dot: 8px;                /* account colour dot */

  /* geometry */
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  /* app height: the visible viewport in a browser, the full screen in an
     installed iOS app (html.is-standalone, js/v2/standalone.js) */
  --app-h: 100dvh;
  --margin: 16px;
  --gap-group: 28px;
  --cell-pad-y: 11px;
  --cell-pad-x: 16px;
  --sep-inset: 16px;
  --row-min: 52px;
  --row-acc: 60px;
  --row-index: 64px;
  --tap-min: 44px;
  --control-h: 44px;
  --glass-item-w: 46px;      /* one button inside a glass capsule (eye + gear) */
  --desk-nav-top: 28px;      /* desktop: nav capsule distance from the top */
  --capsule-sm-h: 30px;      /* period tab, Same */
  --capsule-md-h: 34px;      /* sidebar call to action */
  --button-h: 50px;          /* primary button at the foot of a sheet */
  --radius: 22px;            /* grouped section */
  --radius-section: 22px;
  --radius-sm: 12px;         /* sidebar item, toast */
  --radius-xs: 6px;
  --radius-key: 10px;
  --radius-sheet: 38px;      /* sheet top */
  --radius-full: 999px;
  --radius-capsule: 999px;
  --radius-panel: 26px;      /* desktop sidebar, inspector, form sheet, action sheet group */
  --hairline: 0.5px;
  --grabber-w: 36px;
  --grabber-h: 5px;
  /* floating capsule tab bar: height, per-tab width, inset from the bottom edge */
  --tabbar-h: 62px;
  --tabbar-item-w: 102px;
  --tabbar-inset: max(16px, calc(var(--sb) - 9px));
  /* bottom space a scroller needs so its last row clears the floating tab bar */
  --content-bottom: calc(var(--tabbar-h) + var(--tabbar-inset) + var(--gap-group));
  --float-inset: 8px;
  --navbar-h: 44px;
  --navbar-band-extra: 14px; /* scroll band reaches this far below the nav row */
  --sheet-top: 8px;          /* gap between the status bar and a large sheet */
  --sidebar-w: 272px;
  --sidebar-panel-w: 264px;
  --inspector-w: 420px;
  --content-max: 1180px;

  /* motion: critically damped, controls <= 300 ms, sheets 450 ms */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-linear: linear;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press-out: 240ms;
  --dur-press: 120ms;
  --press-scale: 0.97;
  --dur-fade: 160ms;
  --dur-tab-in: 250ms;
  --dur-tab-out: 200ms;
  --dur-axis: 280ms;
  --dur-scrub-release: 300ms;
  --dur-tween: 300ms;
  --dur-morph: 380ms;
  --dur-segment: 280ms;
  --dur-sheet: 450ms;
  --dur-entry: 600ms;

  /* layers */
  --z-content: 1;
  --z-sticky: 50;
  --z-tabbar: 100;
  --z-inspector: 150;
  --z-sheet: 200;
  --z-actionsheet: 250;
  --z-fullscreen: 300;
  --z-toast: 400;
}

@media (min-width: 430px) { :root { --margin: 20px; } }

/* desktop: wider margins; the sidebar replaces the tab bar, so content needs no bottom clearance */
@media (min-width: 1024px) {
  :root { --margin: 40px; --content-bottom: var(--gap-group); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tab-in: 0ms; --dur-tab-out: 0ms; --dur-axis: 0ms; --dur-scrub-release: 0ms;
    --dur-tween: 0ms; --dur-morph: 0ms; --dur-segment: 0ms; --dur-sheet: 0ms; --dur-entry: 0ms;
    --dur-fade: 120ms; --dur-press-out: 0ms; --dur-press: 0ms;
  }
}

/* no backdrop-filter, or the user reduced transparency: glass becomes a solid
   grey with the same rim, so shapes and hierarchy stay the same */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-tint: var(--cell-2);
    --glass-tint-strong: var(--cell-2);
    --glass-tint-bar: var(--bg);
    --material: var(--material-solid);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: var(--cell-2);
    --glass-tint-strong: var(--cell-2);
    --glass-tint-bar: var(--bg);
    --material: var(--material-solid);
    --glass-filter: none;
    --glass-filter-thick: none;
    --glass-filter-thin: none;
  }
}
/* increased contrast: near-opaque glass, stronger rim and separators */
@media (prefers-contrast: more) {
  :root {
    --glass-tint: rgba(44, 44, 48, 0.96);
    --glass-tint-strong: rgba(44, 44, 48, 0.98);
    --glass-tint-bar: rgba(0, 0, 0, 0.97);
    --glass-lens: rgba(255, 255, 255, 0.22);
    --glass-rim: rgba(255, 255, 255, 0.42);
    --glass-rim-top-active: rgba(255, 255, 255, 0.70);
    --sep: rgba(120, 120, 128, 0.90);
    /* tertiary grey (placeholders, chevrons) raised for legibility (r2-perf P1) */
    --label-3: rgba(235, 235, 245, 0.55);
  }
}

html.is-standalone {
  --app-h: 100vh;
  /* iOS 26 softens the content right under the status bar in an installed
     app; start the content a little lower so the large title stays clear of it */
  --st: calc(env(safe-area-inset-top, 0px) + 14px);
}