/* ─────────────────────────────────────────────────────────────────
 * Fi Advisory Design System — color & type tokens
 *
 * Loaded fonts (via Google Fonts CDN):
 *   - Geist        : display, body, UI labels
 *   - Inter        : button labels, badge labels
 *   - Geist Mono   : code, hex codes, IDs
 *
 * If you need to ship offline, drop .woff2 files in /fonts and replace
 * the @import with @font-face blocks.
 * ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Raw color — Neutral (Tailwind neutral, OKLCH) ─────────────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* Custom neutrals seen heavily in the Figma source */
  --ink:         #151515;   /* primary heading color */
  --ink-2:       #1f1f1f;
  --ink-3:       #323232;
  --ink-muted:   #555555;
  --ink-faint:   #757575;
  --ink-disabled:#808080;
  --line:        #f0f0f0;   /* default card / input border */
  --line-2:      #ededed;
  --line-3:      #d4d4d4;   /* stronger outline */

  /* ── Brand & action ───────────────────────────────────────────── */
  --indigo-50:   #eff4ff;
  --indigo-100:  #e3eeff;   /* secondary button bg */
  --indigo-200:  #c3d5ff;
  --indigo-300:  #7b9fe1;
  --indigo-500:  #5469e3;   /* PRIMARY — the only brand action color */
  --indigo-600:  #2d6ad8;
  --indigo-700:  #2a3492;   /* secondary button label / Dark badge */
  --indigo-800:  #1d4ed8;
  --indigo-900:  #172554;

  /* ── Semantic — destructive ───────────────────────────────────── */
  --red-50:      #fef2f2;
  --red-100:     #ffe2e2;
  --red-200:     #fecaca;
  --red-300:     #fca5a5;
  --red-400:     #f87171;
  --red-500:     #ef4444;
  --red-600:     #dc2626;
  --red-700:     #b91c1c;
  --destructive:        #da2f31;   /* button/badge destructive */
  --destructive-bg:     #ffeae4;   /* badge bg */

  /* ── Semantic — success ───────────────────────────────────────── */
  --success:            #359946;
  --success-bg:         #ebf6ed;

  /* ── Semantic — warning ───────────────────────────────────────── */
  --warning:            #f7a328;
  --warning-bg:         #ffdc4a;

  /* ── Data viz / charts ────────────────────────────────────────── */
  --chart-1: #5469e3;
  --chart-2: #2d6ad8;
  --chart-3: #7b9fe1;
  --chart-4: #359946;
  --chart-5: #f7a328;
  --chart-6: #da2f31;

  /* ── Semantic surfaces ────────────────────────────────────────── */
  --bg-canvas:    var(--neutral-100);  /* #f5f5f5 — app shell */
  --bg-surface:   #ffffff;             /* card / panel */
  --bg-sunken:    var(--neutral-50);   /* striped table, code blocks */
  --bg-inverse:   #000000;             /* dark thumbnail / inverse surface */

  /* ── Semantic foreground ──────────────────────────────────────── */
  --fg-1: var(--ink);          /* primary text */
  --fg-2: var(--ink-muted);    /* body / supporting */
  --fg-3: var(--ink-faint);    /* labels, metadata */
  --fg-disabled: var(--ink-disabled);
  --fg-on-primary: #ffffff;
  --fg-on-secondary: var(--indigo-700);

  /* ── Border tokens ────────────────────────────────────────────── */
  --border-default: var(--line);
  --border-strong:  var(--line-3);
  --border-divider: var(--line-2);
  --border-focus:   var(--indigo-500);

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons, inputs, badges */
  --radius-lg: 10px;    /* small cards */
  --radius-xl: 12px;    /* page-level cards */
  --radius-2xl: 16px;   /* drawers / sheets */
  --radius-full: 9999px;

  /* ── Shadows (Tailwind-equivalent) ────────────────────────────── */
  --shadow-2xs: 0px 1px 0px 0px rgba(0,0,0,0.05);
  --shadow-xs:  0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-sm:  0px 1px 2px -1px rgba(0,0,0,0.10), 0px 1px 3px 0px rgba(0,0,0,0.10);
  --shadow-md:  0px 2px 4px -2px rgba(0,0,0,0.10), 0px 4px 6px -1px rgba(0,0,0,0.10);
  --shadow-lg:  0px 4px 6px -4px rgba(0,0,0,0.10), 0px 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-xl:  0px 8px 10px -6px rgba(0,0,0,0.10), 0px 20px 25px -5px rgba(0,0,0,0.10);
  --shadow-2xl: 0px 25px 50px -12px rgba(0,0,0,0.25);

  /* Signature: primary-button hover glow */
  --shadow-primary-glow:
    0px 1px 1px 0px rgba(84,105,227,0.50),
    0px 2px 2px 0px rgba(84,105,227,0.30),
    0px 5px 3px 0px rgba(84,105,227,0.18),
    0px 9px 4px 0px rgba(84,105,227,0.08),
    0px 15px 4px 0px rgba(84,105,227,0.03);

  /* ── Spacing scale (4-px base) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Type stacks ──────────────────────────────────────────────── */
  --font-display:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:     'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui:       'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:     'Geist Mono', 'Courier New', ui-monospace, monospace;

  /* ── Semantic type roles ──────────────────────────────────────── */
  /* h1 — page hero, dashboard headline */
  --h1-family: var(--font-display);
  --h1-size: 48px;
  --h1-weight: 700;
  --h1-line: 1.0;
  --h1-tracking: -0.010em;

  /* h2 — section header inside docs */
  --h2-family: var(--font-display);
  --h2-size: 24px;
  --h2-weight: 700;
  --h2-line: 1.2;
  --h2-tracking: -0.020em;

  /* h3 — card titles */
  --h3-family: var(--font-display);
  --h3-size: 20px;
  --h3-weight: 600;
  --h3-line: 1.25;
  --h3-tracking: -0.010em;

  /* h4 — small section label */
  --h4-family: var(--font-display);
  --h4-size: 16px;
  --h4-weight: 600;
  --h4-line: 1.5;
  --h4-tracking: 0em;

  /* Body */
  --p-family: var(--font-body);
  --p-size: 14px;
  --p-weight: 400;
  --p-line: 1.5;
  --p-tracking: 0.005em;
  --p-color: var(--fg-2);

  /* Body — medium emphasis */
  --p-medium-weight: 500;

  /* Small / metadata */
  --small-size: 12px;
  --small-line: 1.5;
  --small-color: var(--fg-3);

  /* Mini / chip / counter */
  --mini-size: 11px;
  --mini-weight: 500;
  --mini-line: 1.0;
  --mini-tracking: -0.025em;

  /* Button label — uses Inter not Geist */
  --button-family: var(--font-ui);
  --button-size: 14px;
  --button-size-sm: 12px;
  --button-weight: 500;
  --button-tracking: -0.025em;

  /* Mono */
  --code-family: var(--font-mono);
  --code-size: 13px;

  /* Numeric display — for portfolio values, INR amounts */
  --num-family: var(--font-display);
  --num-tracking: -0.020em;
  --num-feature-settings: "tnum" 1, "lnum" 1;

  /* ── Easing & duration ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
}

/* ── Light is the default; this dark override mirrors the Figma
 *    "Advisor - Desktop - Dark" playground frames ────────────────── */
[data-theme="dark"] {
  --bg-canvas:  #0a0a0a;
  --bg-surface: #171717;
  --bg-sunken:  #262626;
  --fg-1: #fafafa;
  --fg-2: #d4d4d4;
  --fg-3: #a3a3a3;
  --border-default: #262626;
  --border-strong:  #404040;
  --border-divider: #1f1f1f;
}

/* ─────────────────────────────────────────────────────────────────
 * Optional element-level resets — only applied when this file is
 * the page's main stylesheet (we keep these scoped to .fi-styles so
 * embedding inside other markup is safe).
 * ───────────────────────────────────────────────────────────────── */
.fi-styles,
.fi-styles * {
  box-sizing: border-box;
}

.fi-styles body,
body.fi-styles {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--p-size);
  line-height: var(--p-line);
  letter-spacing: var(--p-tracking);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fi-h1 { font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line); letter-spacing: var(--h1-tracking); color: var(--fg-1); margin: 0; }
.fi-h2 { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line); letter-spacing: var(--h2-tracking); color: var(--fg-1); margin: 0; }
.fi-h3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); color: var(--fg-1); margin: 0; }
.fi-h4 { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line); color: var(--fg-1); margin: 0; }
.fi-p  { font-family: var(--p-family);  font-size: var(--p-size);  font-weight: var(--p-weight); line-height: var(--p-line); letter-spacing: var(--p-tracking); color: var(--p-color); margin: 0; }
.fi-p-medium { font-weight: var(--p-medium-weight); color: var(--fg-1); }
.fi-small { font-size: var(--small-size); line-height: var(--small-line); color: var(--small-color); }
.fi-mini  { font-size: var(--mini-size); font-weight: var(--mini-weight); line-height: var(--mini-line); letter-spacing: var(--mini-tracking); }
.fi-mono  { font-family: var(--code-family); font-size: var(--code-size); }
.fi-num   { font-family: var(--num-family); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--num-tracking); }