/* CA Hub design tokens. Everything visual in the app is built from the values in this file; view CSS never
   hard-codes a colour, a font size or a radius.

   The language is Apple's. With a pointer the app reads as a Mac app: white content pane, opaque grey source
   list, translucent toolbars, 7px controls, cards with a hairline edge and a very soft shadow. On a phone it
   reads as an iOS app: grouped grey background, white inset groups, 44pt controls, bottom sheets. Numbers are
   tabular, hero figures neutral, green / red only on P&L. Charts: a signed series is split at zero; the area
   fades from the line to the baseline.

   Tokens that ECharts reads through core.js chartColors() (--text, --text-2, --text-3, --border, --grid,
   --bg-elev, --accent, --ok, --warn, --danger, --pos, --neg, --c1..6) must stay plain #rrggbb: chart code
   appends an alpha byte to them. */
:root {
  color-scheme: light;

  /* ---- type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", Inter, "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", Inter, "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 11px;        --lh-xs: 14px;        /* caption: section headings, axis labels, timestamps */
  --fs-sm: 12px;        --lh-sm: 16px;        /* footnote: freshness, labels above figures, chips */
  --fs-md: 13px;        --lh-md: 18px;        /* callout: controls, second lines, table headers */
  --fs-body: 14px;      --lh-body: 20px;      /* body: table cells, text */
  --fs-headline: 15px;  --lh-headline: 20px;  /* headline (600): row titles, toolbar titles */
  --fs-title3: 17px;    --lh-title3: 22px;    /* card titles */
  --fs-title2: 20px;    --lh-title2: 25px;    /* band metrics */
  --fs-title1: 24px;    --lh-title1: 30px;    /* figures in tiles */
  --fs-large: 28px;     --lh-large: 34px;     /* big figures, phone large titles */
  --fs-display: 40px;   --lh-display: 44px;   /* hero figures */
  --fs-chat: 15px;      --lh-chat: 21px;      /* message text */
  --track-hero: -.01em;
  --track-title: -.008em;

  /* ---- shape (macOS with a pointer; iOS radii on phones, see the end of the file) */
  --radius-xs: 4px;       /* chips inside rows, gauge tracks */
  --radius-ctl: 7px;      /* buttons, fields, segmented controls */
  --radius-sm: 8px;       /* menu items, sidebar rows */
  --radius: 10px;         /* blocks inside a card, inset lists */
  --radius-lg: 12px;      /* cards, popovers */
  --radius-xl: 16px;      /* sheets and floating panels */
  --pill: 999px;
  --bubble-r: 18px;
  --bubble-r-join: 6px;   /* the corners where two bubbles of one run meet */
  --media-w: 400px;       /* width of cards, images and files in a conversation */
  --hair: 1px;            /* hairline width; 0.5px on 2x screens (below) */

  /* ---- layout */
  --side-w: 280px;        /* sidebar */
  --insp-w: 380px;        /* inspector beside a conversation */
  --bar-h: 52px;          /* toolbar: the bar on top of a conversation or page */
  --tab-h: 50px;          /* phone tab bar (plus the home-indicator inset) */
  --page-max: 1240px;
  --page-pad: 24px;
  --ctl-h: 28px;          /* control height with a pointer */
  --ctl-h-sm: 22px;
  --ctl-h-lg: 36px;
  --field-h: 30px;        /* text fields and selects (a button beside a field takes this height) */
  --row-h: 44px;          /* list and table rows */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- motion */
  --t-fast: 100ms;        /* hover, press */
  --t: 180ms;             /* popovers, menus */
  --t-base: 280ms;        /* inspector, crossfades, segmented thumb */
  --t-slow: 420ms;        /* sheets, phone push */
  --t-out: 120ms;         /* leaving is quicker than arriving */
  --t-tick: 900ms;        /* the wash on a value that just changed */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-snappy: cubic-bezier(.25, 1, .5, 1);     /* replaced by springs below where linear() exists */
  --ease-smooth: cubic-bezier(.32, .72, 0, 1);

  /* ---- surfaces */
  --bg: #ffffff;                          /* the content pane (pages) */
  --bg-content: #ffffff;                  /* the conversation */
  --bg-elev: #ffffff;                     /* cards, tiles, sheets */
  --bg-sunken: #f5f5f7;                   /* wells inside a surface: fields, quotes */
  --bg-side: #f0f0f3;                     /* source list (opaque on purpose) */
  --bg-insp: #fafafc;                     /* inspector pane */
  --fill: rgba(120, 120, 128, .16);       /* pressed */
  --fill-2: rgba(120, 120, 128, .12);     /* gray buttons, segmented track, neutral chips, bar tracks */
  --fill-3: rgba(120, 120, 128, .07);     /* hover */
  --fill-hover: rgba(120, 120, 128, .20);
  --bg-hover: rgba(0, 0, 0, .035);        /* row hover */
  --bg-active: #ebebf0;                   /* pressed row */
  --selection: #dcdce2;                   /* selected row in a source list (a step darker than row hover) */
  --hairline: rgba(60, 60, 67, .14);
  --hairline-strong: rgba(60, 60, 67, .29);
  --border: #e5e5ea;
  --border-strong: #c7c7cc;
  --grid: #ededf0;
  --thumb: #ffffff;                       /* segmented thumb, switch knob */

  /* ---- text */
  --text: #1d1d1f;
  --text-2: #62626a;
  --text-3: #737378;                      /* still 4.5:1 on white */
  --text-4: #aeaeb2;                      /* placeholders, disabled */

  /* ---- accent */
  --accent: #0071e3;                      /* filled buttons (white text 4.7:1) */
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, .10);
  --accent-text: #ffffff;
  --on-fill: #ffffff;                     /* glyphs and text on a filled mark, in both themes */
  --tint: #0071e3;                        /* marks that are not text: bars, switches, focus */
  --link: #0066cc;                        /* tappable text, sidebar icons */
  --ring: 0 0 0 1px var(--tint), 0 0 0 3.5px rgba(0, 113, 227, .35);

  /* ---- meaning */
  --pos: #1a7431;       --pos-line: #28a745;     --pos-soft: #e3f5e8;
  --neg: #d70015;       --neg-line: #ff3b30;     --neg-soft: #fde7e9;
  --ok: #1a7431;        --ok-fill: #34c759;      --ok-soft: #e3f5e8;
  --warn: #b25000;      --warn-fill: #ff9500;    --warn-soft: #fff3e0;
  --danger: #d70015;    --danger-fill: #ff3b30;  --danger-soft: #fde7e9;
  --info-soft: #e8f1fb;
  --c1: #007aff; --c2: #ff9500; --c3: #30b0c7; --c4: #5856d6; --c5: #ff2d55; --c6: #8e8e93;

  /* ---- charts (hand-written SVG) */
  --chart-neutral: #8e8e93;
  --chart-grid: rgba(60, 60, 67, .10);
  --chart-baseline: rgba(60, 60, 67, .45);
  --chart-crosshair: rgba(29, 29, 31, .45);
  --ring-bg: var(--bg-elev);              /* the surface a chart mark sits on (containers re-point it) */
  --chart-area-top: .22;                  /* area gradient opacity at the line */

  /* ---- chat */
  --bubble-me: #0a7cff;
  --bubble-me-2: #0a6cf0;                 /* own bubbles shade slightly darker towards the bottom */
  --bubble-me-text: #ffffff;
  --bubble-other: #e9e9eb;
  --bubble-me-doc: #dbeaff;               /* my own bubble when it carries colours, tables, highlights (dark words) */
  --mark: #ffe48a;                        /* ==highlight== in a message */

  /* ---- overlays and materials (translucency only where content scrolls beneath) */
  --overlay: rgba(0, 0, 0, .20);
  --scrim: rgba(0, 0, 0, .5);             /* over a picture: "+3" on the last image of a set */
  --blur: saturate(180%) blur(20px);
  --blur-thick: saturate(180%) blur(40px);
  --material-bar: rgba(255, 255, 255, .78);          /* toolbars */
  --material-tab: rgba(249, 249, 251, .86);          /* phone tab bar */
  --material-pop: rgba(250, 250, 252, .86);          /* popovers, menus, toasts */
  --material-bar-canvas: var(--material-bar);        /* legacy alias */

  /* ---- shadows and edges */
  --edge: inset 0 0 0 .5px rgba(0, 0, 0, .07);
  --shadow-card: 0 .5px 1px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .14);
  --shadow-sheet: 0 0 0 .5px rgba(0, 0, 0, .15), 0 24px 64px rgba(0, 0, 0, .22);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04);
  --shadow-md: var(--shadow-pop);         /* legacy aliases (dashboard CSS) */
  --shadow-lg: var(--shadow-sheet);
  --seg-on: var(--thumb);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --bg-content: #1e1e1e;
  --bg-elev: #2c2c2e;
  --bg-sunken: #323234;
  --bg-side: #262628;
  --bg-insp: #232325;
  --fill: rgba(120, 120, 128, .32);
  --fill-2: rgba(120, 120, 128, .24);
  --fill-3: rgba(120, 120, 128, .14);
  --fill-hover: rgba(120, 120, 128, .40);
  --bg-hover: rgba(255, 255, 255, .045);
  --bg-active: #3a3a3c;
  --selection: #3a3a3c;
  --hairline: rgba(84, 84, 88, .55);
  --hairline-strong: rgba(120, 120, 128, .55);
  --border: #38383a;
  --border-strong: #545458;
  --grid: #303032;
  --thumb: #636366;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #8d8d92;
  --text-4: #636366;
  --accent: #0a6fe0;
  --accent-hover: #1a7cf0;
  --accent-soft: rgba(61, 155, 255, .16);
  --tint: #0a84ff;
  --link: #3d9bff;
  --ring: 0 0 0 1px var(--tint), 0 0 0 3.5px rgba(61, 155, 255, .45);
  --pos: #30d158;       --pos-line: #30d158;     --pos-soft: rgba(48, 209, 88, .16);
  --neg: #ff6961;       --neg-line: #ff453a;     --neg-soft: rgba(255, 69, 58, .18);
  --ok: #30d158;        --ok-fill: #30d158;      --ok-soft: rgba(48, 209, 88, .16);
  --warn: #ffb340;      --warn-fill: #ff9f0a;    --warn-soft: rgba(255, 159, 10, .16);
  --danger: #ff6961;    --danger-fill: #ff453a;  --danger-soft: rgba(255, 69, 58, .18);
  --info-soft: rgba(61, 155, 255, .16);
  --c1: #0a84ff; --c2: #ff9f0a; --c3: #40c8e0; --c4: #7d7aff; --c5: #ff375f; --c6: #98989d;
  --chart-neutral: #8d8d92;
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-baseline: rgba(235, 235, 245, .40);
  --chart-crosshair: rgba(245, 245, 247, .50);
  --chart-area-top: .32;
  --bubble-me: #0a84ff;
  --bubble-me-2: #0a74ea;
  --bubble-other: #333336;
  --bubble-me-doc: #1b3a61;
  --mark: rgba(255, 204, 0, .36);
  --overlay: rgba(0, 0, 0, .45);
  --material-bar: rgba(30, 30, 30, .72);
  --material-tab: rgba(22, 22, 24, .82);
  --material-pop: rgba(44, 44, 46, .82);
  --edge: inset 0 0 0 .5px rgba(255, 255, 255, .08);
  --shadow-card: 0 0 0 .5px rgba(255, 255, 255, .07);
  --shadow-pop: 0 0 0 .5px rgba(255, 255, 255, .10), 0 8px 24px rgba(0, 0, 0, .50);
  --shadow-sheet: 0 0 0 .5px rgba(255, 255, 255, .12), 0 24px 64px rgba(0, 0, 0, .60);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .40);
}

/* a narrower source list where the window is tablet-sized */
@media (min-width: 768px) and (max-width: 1023px) { :root { --side-w: 236px; } }

/* crisp half-pixel hairlines on retina screens */
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }

/* springs where CSS linear() exists */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-snappy: linear(0, .102, .302, .506, .677, .803, .889, .944, .976, .993, 1.001, 1.005, 1.005, 1.004, 1);
    --ease-smooth: linear(0, .131, .358, .562, .715, .821, .89, .934, .96, .977, .986, .992, .995, .997, 1);
  }
}

/* system setting "Increase contrast" */
@media (prefers-contrast: more) {
  :root { --hairline: rgba(60, 60, 67, .40); --text-2: #3a3a3f; --text-3: #48484d; --accent: #0058b8; --link: #004a9c; --pos: #0f5a22; --neg: #a80012; --ok: #0f5a22; --warn: #7d3600; --danger: #a80012; }
  :root[data-theme="dark"] { --hairline: rgba(235, 235, 245, .42); --text-2: #dcdce1; --text-3: #b9b9bf; --link: #7abaff; }
}
/* system setting "Reduce transparency": materials become opaque */
@media (prefers-reduced-transparency: reduce) {
  :root { --blur: none; --blur-thick: none; --material-bar: #ffffff; --material-tab: #f9f9fb; --material-pop: #fafafc; }
  :root[data-theme="dark"] { --material-bar: #1e1e1e; --material-tab: #161618; --material-pop: #2c2c2e; }
}

/* phones: iOS — grouped background, iOS text sizes, 44pt controls, iOS radii */
@media (max-width: 767px) {
  :root {
    --bg: #f2f2f7;
    --fs-xs: 11px;        --lh-xs: 13px;
    --fs-sm: 13px;        --lh-sm: 18px;
    --fs-md: 15px;        --lh-md: 20px;
    --fs-body: 16px;      --lh-body: 22px;
    --fs-headline: 17px;  --lh-headline: 22px;
    --fs-title3: 19px;    --lh-title3: 24px;
    --fs-title2: 22px;    --lh-title2: 28px;
    --fs-title1: 26px;    --lh-title1: 32px;
    --fs-large: 34px;     --lh-large: 41px;
    --fs-display: 40px;   --lh-display: 44px;
    --fs-chat: 16.5px;    --lh-chat: 22px;
    --media-w: 100%;
    --radius-ctl: 10px;
    --radius: 10px;
    --radius-lg: 12px;
    --radius-xl: 22px;
    --ctl-h: 36px;
    --ctl-h-sm: 30px;
    --ctl-h-lg: 50px;
    --field-h: 44px;
    --row-h: 48px;
    --bar-h: 44px;
    --page-pad: 16px;
    --shadow-card: 0 0 0 0 transparent;   /* not `none`: this token is also used inside comma lists */
  }
  :root[data-theme="dark"] { --bg: #000000; --bg-content: #000000; --bg-elev: #1c1c1e; --bg-sunken: #2c2c2e; --bubble-other: #262629; --shadow-card: 0 0 0 0 transparent; }
}