/* ==========================================================================
   DESIGN PRIMITIVES — Mobbin reference system
   --------------------------------------------------------------------------
   Literal values from the design (DESIGN.md / variables.css / tokens.json at
   the repo root). Nothing here is consumed by a component directly: style.css
   maps its own semantic names onto these, so a future palette swap is one file.

   Three fixes were needed on the way in — the supplied variables.css cannot be
   used verbatim:

   1. --card-padding / --radius-cards / --element-gap were ranges ("16-24px"),
      which is not a CSS value. They were prose from the doc that leaked into
      the variables file. The real numbers live in the spacing/radius scales.
   2. Every --leading-* was a unitless pixel count (--leading-body: 22). Used as
      line-height that means 22x the font size. Converted to ratios here.
   3. --font-saans names a proprietary face. Inter Variable is the doc's own
      suggested substitute and is the only part of this that must be a variable
      font: the signature weights (440/456/652) do not exist as static cuts.

   Light only. The design defines no dark palette and forbids chromatic accent,
   which is why style.css carries a single deliberate exception for danger.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Achromatic by design: "#141414 is the only 'color'". Zero chroma across
     the ramp — hierarchy comes from weight and tone, never hue. */
  --color-midnight-ink: #141414;   /* primary text, headings, filled CTA */
  --color-pure-canvas: #ffffff;    /* page, card surfaces, text on dark fill */
  --color-graphite: #707070;       /* body copy, secondary text */
  --color-ash: #adadad;            /* tertiary text, placeholders, disabled */
  --color-fog: #ededed;            /* dividers, card borders */
  --color-mist: #f2f2f2;           /* input fill, inner surface, hover */
  --color-silver: #c2c2c2;         /* skeletons, inactive fills */
  --color-slate-shadow: #e0e0e0;

  /* --- Type --------------------------------------------------------------
     Inter Variable standing in for 'saans'. The fractional weights are the
     point: 440 and 456 sit between Regular and Semibold, which is mass no
     static cut exposes. Rounding them to 400/500 loses the whole effect. */
  --font-saans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-w440: 440;   /* UI labels, nav */
  --font-weight-w456: 456;   /* mid-emphasis body, table primary values */
  --font-weight-semibold: 600;
  --font-weight-w652: 652;   /* hero numerics */

  /* Tracking. Positive at small sizes for legibility, negative at display
     sizes — the doc is explicit that removing it makes the face read generic. */
  --tracking-caption: 0.017em;
  --tracking-body: 0.013em;
  --tracking-subheading: 0.014em;
  --tracking-heading-lg: -0.007em;
  --tracking-display: -0.011em;

  /* Line heights as ratios (the supplied file had these as raw px counts). */
  --leading-caption: 1.333;      /* 16/12 */
  --leading-body-sm: 1.429;      /* 20/14 */
  --leading-body: 1.375;         /* 22/16 */
  --leading-subheading: 1.4;     /* 28/20 */
  --leading-heading: 1.313;      /* 42/32 */
  --leading-heading-lg: 1.125;   /* 63/56 */
  --leading-display: 1;          /* 80/80 */

  /* --- Shape -------------------------------------------------------------
     A closed vocabulary: pill for anything interactive, 24px for large
     containers, 16px for cards and images, 8px for inline badges. The doc
     forbids intermediate values. */
  --radius-badge: 8px;
  --radius-card: 16px;
  --radius-container: 24px;
  --radius-pill-full: 9999px;

  /* --- Elevation ---------------------------------------------------------
     Near-absent by design. Cards use a 1px border, never shadow; the ambient
     lift is reserved for floating panels. */
  --shadow-subtle: rgba(64, 64, 64, 0.16) 0 0 0 1px inset;
  --shadow-float: rgba(0, 0, 0, 0.04) 0 8px 40px 0;

  /* --- Directional data — a scoped exception -----------------------------
     The design bans chromatic accent, and everywhere else that holds. Trend
     direction is the one place it costs more than it buys: a rank that rose
     and a rank that fell are the same shape, the same weight and the same
     number — only a 12px arrow separates them. Reading a whole page of those
     to see what is climbing is worse than spending two colours on it.

     Used only by trending insights (rank deltas, sparklines, new-row tint)
     and, separately, by --color-danger for destructive actions. Nothing else
     in the app may introduce a hue. */
  --color-trend-up: #16a34a;
  --color-trend-down: #dc2626;
  /* Two steps darker than the pair above, which sit at the same level as each
     other. These only ever appear as small badge text on a pale tint, and at
     that size the 600-weight versions do not hold their contrast.

     The orange sat at hue 17deg, which is nine degrees off red-600 and read as
     red to anyone not comparing them side by side — "something is wrong" for a
     badge that means "not shown to followers yet". At 26deg it reads as the
     orange it is. That costs contrast: 4.1:1 on its own tint rather than 4.3,
     because on a pale ground you can have a convincing orange or a compliant
     one. A true orange-600 measures 3.1:1, which is not shippable at 10px.

     The green is for a personal best. It was borrowing the trial orange, so a
     row could carry two identical badges meaning unrelated things. */
  --color-trial: #bd5200;
  --color-record: #15803d;
}