/* METRIC TOKENS — how big things are, on web and desktop.

   NOT SHARED WITH MOBILE: colour carries meaning and must match everywhere;
   measurement carries density and must not.

   The density was reopened in this pass. What changed, and why:

     --rail-width    52 → 56px   The icon grew 18 → 20px. At 18 in a 52 rail the
                                 glyphs read as small rather than compact, and the
                                 rail is the one piece of chrome present on every
                                 screen. Four pixels buys the whole set presence.
     --panel-width   320 → 352px The analysis panel holds prose WITH an
                                 invalidation clause. At 13px inside 320 minus
                                 padding, the measure was ~44 characters — below
                                 the readable floor for anything you have to
                                 actually read. 352 gives ~50.
     --header-height 52 → 48px   The header holds one line of chrome. Four pixels
                                 back to the chart, on every screen, for free.

   Net: the chart gains 4px of height and loses 36px of width. That trade is
   right for this product — the panel is prose and the chart is a series; a series
   loses almost nothing to 36px, and a paragraph gains a lot. */

:root {
  /* --- spacing — 4px ramp ------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- radius -----------------------------------------------------------
     4 / 7 / 12. Deliberately not 4/8/16: the doubling ladder is what every
     framework default does, and a 7px control beside a 12px card reads as
     considered where 8 beside 16 reads as generated. */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* --- elevation --------------------------------------------------------
     Used in three places only: floating chart chrome, the auth card, and an
     open menu. Everywhere else a line does the work. */
  --shadow-sm: 0 1px 2px light-dark(rgba(26, 31, 38, 0.07), rgba(0, 0, 0, 0.4));
  --shadow-md: 0 4px 14px light-dark(rgba(26, 31, 38, 0.09), rgba(0, 0, 0, 0.42));
  --shadow-lg: 0 18px 44px light-dark(rgba(26, 31, 38, 0.13), rgba(0, 0, 0, 0.5));

  /* --- icon sizes ------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* --- empty states -----------------------------------------------------
     A measure, not a container width. An explanation set across a full 1440px
     panel is the fastest way to make an empty state look like an error. */
  --empty-icon: 32px;
  --empty-measure: 56ch;

  /* --- layout ----------------------------------------------------------
     --tap-target-min is the one metric here that is not desktop-specific: it is
     the accessibility floor for a pointer target, and mobile's own floor is at
     least this large, never smaller. */
  --rail-width: 56px;
  /* The rail with its labels showing. 184px fits "Strategies" plus its shortcut
     hint without truncation and is still narrow enough that a trader who pins it
     open has not given up a meaningful slice of chart. */
  --rail-width-open: 184px;
  /* (--rail-width − 36px button) ÷ 2. What centres a collapsed rail button. */
  --rail-gutter: 10px;
  --panel-width: 352px;
  --header-height: 48px;
  --tap-target-min: 44px;
  /* The hairline a dense surface uses instead of a filled panel. */
  --hairline: 1px solid var(--line-default);
}

/* Elevation is the one thing paper needs LESS of — the same shadow that reads as
   depth on ink reads as dirt here. Only the colour changes; the offsets are
   shared, which is why these are one declaration each and not a second block. */