/* PickVesting — design tokens.
   Single source for web and the mobile prototype. Committed to one LIGHT
   theme: white/green, the v2 direction. The app had shipped dark; the reskin
   swaps every token here and the tree follows, because components style
   through tokens rather than literals. No prefers-color-scheme handling —
   one deliberate look, not two half-maintained ones.

   The rule the light theme adds: the brand green #2BD97C is a FILL color.
   As text on white it reads at 1.75:1 — invisible. Anything that used to
   write --accent as a text color now writes --accent-text, a deepened green
   that clears WCAG AA on white. Buttons, marks and badges keep the bright
   green with dark ink on top. */

:root {
  /* Surfaces */
  --bg-app:         #F7FAF8;
  --bg-canvas:      #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-input:       #FFFFFF;
  --bg-tile:        #EFF4F0;
  --bg-elev:        #E7EEE9;
  --bg-active:      #DFE9E2;

  /* Lines */
  --line-hairline:  #E7EDE9;
  --line-card:      #E2EAE5;
  --line-input:     #D8E2DB;
  --line-strong:    #C4D2C9;

  /* Text ramp */
  --text-hi:        #0C1210;
  --text-body:      #333F38;
  --text-mid:       #4B584F;
  --text-mute:      #5C6B62;
  --text-dim:       #66756D;
  --text-faint:     #8A968E;

  /* Brand. --accent doubles as "up" and stays the bright fill green; it is
     never used as text on a light surface. --accent-text is the green that
     text and small icons use — 5.3:1 on white. */
  --accent:         #2BD97C;
  --accent-hi:      #25C46F;
  --accent-text:    #0B6E40;
  --accent-text-hi: #084D2D;
  --accent-ink:     #06130B;
  --accent-tint:    #E9F9F0;
  --accent-line:    #2BD97C99;

  /* Semantic. Darkened from the dark theme's values so they hold as text on
     white; tints flip from deep washes to pale ones. */
  --medal-gold:     #C9A227;

  --danger:         #CE3A46;
  --danger-tint:    #FBE9EA;
  --warn:           #8A6A1D;
  --warn-tint:      #F6EED6;

  /* Dark surface set — the app's former ground, kept as tokens because some
     surfaces stay deliberately dark on the light site (the hero record card,
     share cards). One place, so "the dark card" is one color everywhere. */
  --ink-app:        #0B0E13;
  --ink-tile:       #0E1219;
  --ink-line:       #1C2330;
  --ink-text-hi:    #E8ECF1;
  --ink-text-body:  #C6CDD8;
  --ink-text-dim:   #8B94A3;

  /* Radii */
  --r-sheet: 22px;
  --r-card:  18px;
  --r-tile:  16px;
  --r-ctrl:  14px;
  --r-sm:    12px;
  --r-xs:    10px;
  --r-md:    16px;   /* alias of tile scale — newer components reference it */
  --r-pill:  999px;

  /* Generic border alias. The line-* ramp is the source of truth; this keeps
     component CSS that says "the standard border" resolving to it. */
  --border:  var(--line-card);
  --r-xs:    10px;
  --r-pill:  999px;

  /* Type */
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --rail-w:      232px;
  --content-max: 720px;
  --wide-max:    1100px;
  --tabbar-h:    64px;

  /* Safe areas — the tab bar sits on the home indicator otherwise. */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}