/* ═══════════════════════════════════════════════════════════════════════════
   Theme 2.0 tokens. Source: DESIGN - Funds benchmark Theme 2.0 / 02-design-tokens.md
   Dark is the native feel, light is equal priority. Names match the design doc
   (--tx, --r1 ...) so the doc maps 1:1. Loaded ONLY on Theme 2.0 pages.
   Rules: green and red mean gain and loss only. --gainfill / --lossfill are FILL
   colours (light-theme values are not text-safe); use --gain / --loss for text.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* page canvas and edge fade */
  --bg:        #0C0A0B;
  --fade:      #0C0A0B;
  --glow1:     radial-gradient(1000px 640px at 90% 100%, rgba(143,0,255,0.12), transparent);
  --glow2:     radial-gradient(900px 560px at 8% 0%, rgba(0,102,255,0.10), transparent);

  /* surfaces */
  --panel:      rgba(255,255,255,0.045);
  --panelsolid: #1A1517;
  --drawer:     #141011;
  --pbd:        rgba(255,255,255,0.09);
  --seg:        rgba(255,255,255,0.05);
  --ghost:      rgba(255,255,255,0.05);
  --track:      rgba(255,255,255,0.08);
  --grid:       rgba(255,255,255,0.07);

  /* text */
  --tx:  #F5F2F3;
  --t2:  #BDB0B4;
  --td:  #9A8D91;   /* labels and axis only, never an essential data value */
  --ink:   #F5F2F3; /* primary fill (active tab, primary button) */
  --inktx: #0C0A0B; /* text on --ink */

  --shadow: 0 12px 40px rgba(0,0,0,0.4);
  --scrim:  rgba(30,20,24,0.35);
  --sk1: rgba(255,255,255,0.05);
  --sk2: rgba(255,255,255,0.11);

  /* brand ramp: lines, accents, focus */
  --r1: #00E5FF;
  --r2: #3D7BFF;
  --r3: #9B5CFF;
  --ramp:    linear-gradient(90deg, #00E5FF, #3D7BFF 50%, #9B5CFF);
  --glass:   linear-gradient(135deg, #0066FF, #8F00FF);
  --glassbd: rgba(0,102,255,0.5);

  /* gain and loss */
  --gain:     #19F58C;
  --loss:     #FF423D;
  --gainfill: #19F58C;
  --lossfill: #FF423D;

  /* sector and category palette (fixed order) */
  --s1: #FFD600;
  --s2: #0066FF;
  --s3: #8F00FF;
  --s4: #00FFE0;
  --s5: #FFFFFF;
  --s6: color-mix(in srgb, #FFD600 55%, #FF423D);
  --s7: #9A8D91;
  /* overlay-fund slots on the fund detail chart */
  --c3: #00FFE0;
  --c4: #0066FF;
  --c5: #FFD600;
  --c6: #B7A6C9;
  /* Today allocation flow only */
  --k1: #2EE6D6;
  --k2: #8B7BFF;
  --k3: #FF6FA5;

  /* type */
  --font: 'Trip Sans', 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* radii */
  --rad-panel: 12px;
  --rad-tile:  10px;
  --rad-btn:   9px;
  --rad-btn-l: 12px;
  --rad-chip:  16px;
  --rad-seg:   10px;
  --rad-seg-i: 8px;

  /* layout rhythm */
  --gap:    6px;     /* the dashboard rhythm, everywhere */
  --pad:    18px;    /* panel padding */
  --page-x: 56px;    /* page side gutter */
  --page-t: 104px;   /* clears the 48px nav + 24px offset */

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.2s;
}

[data-theme="light"] {
  color-scheme: light;

  --bg:   #F2EEEF;
  --fade: #F2EEEF;
  --glow1: radial-gradient(1000px 640px at 90% 100%, rgba(143,0,255,0.07), transparent);
  --glow2: radial-gradient(900px 560px at 8% 0%, rgba(0,102,255,0.07), transparent);

  --panel:      rgba(255,255,255,0.72);
  --panelsolid: #FFFFFF;
  --drawer:     #F7F4F5;
  --pbd:        rgba(255,255,255,0.90);
  --seg:        rgba(255,255,255,0.62);
  --ghost:      rgba(90,60,70,0.05);
  --track:      rgba(90,60,70,0.09);
  --grid:       rgba(90,60,70,0.09);

  --tx: #1A1214;
  --t2: #5E5155;
  --td: #6E6266;
  --ink:   #1F1A1C;
  --inktx: #FFFFFF;

  --shadow: 0 10px 36px rgba(90,50,60,0.10);
  --sk1: rgba(90,60,70,0.06);
  --sk2: rgba(90,60,70,0.13);

  --r1: #0066FF;
  --r2: #4F3DFF;
  --r3: #8F00FF;
  --ramp:    linear-gradient(90deg, #0066FF, #4F3DFF 50%, #8F00FF);
  --glassbd: rgba(0,102,255,0.4);

  --gain:     #1B7A4E;
  --loss:     #C62828;    /* design: "about #C62828", verified by the AA scan, see 08 item 6 */
  --gainfill: #99F89B;    /* owner specified */
  --lossfill: #FF8F8F;

  --s5: #1A1214;
  --s7: #6E6266;
  --c6: #7E6C95;
  --k1: #0A8F8A;
  --k2: #5B3FD9;
  --k3: #D6336C;
}

/* In light theme the glass panel needs a hairline so white-on-near-white reads as a surface */
[data-theme="light"] .t2-panel { box-shadow: 0 1px 2px rgba(90,50,60,0.06); }

/* Motion tokens (shared layer; values come from Builder A's Today hero, which keeps its own .ff copies). Total intro stays under 900 ms. */
:root { --ease-athletic: cubic-bezier(.2, .8, .2, 1); --dur-hero: 900ms; --m-bar: 190ms; --m-line: 600ms; --m-pop: 260ms; --m-fade: 300ms; --m-arc: 450ms; }
@media (max-width: 899px) { :root { --m-bar: 160ms; --m-line: 450ms; --m-arc: 380ms; } }