/* =============================================================
   FINPATH DESIGN SYSTEM — Colors & Type
   Single source of truth for tokens. Light mode primary.
   Mobile-first (390px / iPhone 14).
   Source: Figma Dev Mode (20/05/2026) + finpath-base.css v2.1
   ============================================================= */

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

:root {
  /* ─── Background ─── */
  --bg-1: #FFFFFF;            /* app background */
  --bg-2: #F4F6F7;            /* card / surface */
  --bg-3: #E3E7EA;            /* raised element / chip */
  --bg-accent: #0052FF;       /* brand blue — primary CTA */
  --bg-accent-hover: #083FC5;
  --bg-disabled: #C9D0D8;
  --bg-inverted: #0A0B0D;
  --bg-popup: #FFFFFF;

  --bg-green: #07B269;        /* TĂNG GIÁ / success */
  --bg-green-hover: #098551;
  --bg-red: #E60815;          /* GIẢM GIÁ / danger */
  --bg-red-hover: #D00511;
  --bg-yellow: #FFD200;       /* tham chiếu / warning */
  --bg-blue: #23CDED;         /* info */
  --bg-purple: #E721FF;       /* special / premium */
  --bg-orange: #ED702F;       /* alert orange */

  /* ─── Text ─── */
  --text-primary: #0A0B0D;
  --text-secondary: #5C6C7E;
  --text-placeholder: #A4B0BC;
  --text-disabled: #778799;
  --text-accent: #0052FF;
  --text-link: #1E88FF;
  --text-inverted: #FFFFFF;
  --text-green: #098551;
  --text-red: #E60815;
  --text-yellow: #D19A00;
  --text-blue: #07B0D3;
  --text-purple: #D400FF;
  --text-orange: #DD4F19;

  /* ─── Line / Border ─── */
  --line-divider: #E3E7EA;
  --line-accent: #0052FF;
  --line-green: #07B269;
  --line-red: #FF2B37;
  --line-yellow: #FFD200;
  --line-blue: #23CDED;
  --line-purple: #E721FF;
  --line-orange: #ED702F;

  /* ─── Icon (same values, semantic clarity) ─── */
  --icon-primary: #0A0B0D;
  --icon-secondary: #5C6C7E;
  --icon-placeholder: #A4B0BC;
  --icon-disabled: #778799;
  --icon-accent: #0052FF;
  --icon-link: #1E88FF;
  --icon-inverted: #F4F6F7;
  --icon-green: #098551;
  --icon-red: #E60815;
  --icon-yellow: #D19A00;
  --icon-blue: #07B0D3;
  --icon-purple: #D400FF;
  --icon-orange: #DD4F19;

  /* ─── Opacity backgrounds (≈10% — for soft tags/callouts) ─── */
  --opacity-accent: rgba(0,82,255,0.10);
  --opacity-accent-hover: rgba(0,82,255,0.15);
  --opacity-green: rgba(7,178,105,0.10);
  --opacity-red: rgba(230,8,21,0.10);
  --opacity-yellow: rgba(255,210,0,0.10);
  --opacity-blue: rgba(35,205,237,0.10);
  --opacity-purple: rgba(153,69,255,0.10);
  --opacity-orange: rgba(237,112,47,0.10);
  --opacity-neutral: rgba(0,0,0,0.05);

  /* ─── Radii ─── */
  --radius-primary: 16px;      /* cards, modals, sheets */
  --radius-secondary: 12px;    /* buttons, inputs, chips */
  --radius-none: 0px;
  --radius-full: 9999px;       /* pills, avatars */

  /* ─── Spacing (4px base) ─── */
  --sp-0: 0px;
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-2-5: 10px;
  --sp-3: 12px;
  --sp-3-5: 14px;
  --sp-4: 16px;
  --sp-4-5: 18px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─── Fonts ─── */
  --font-title: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ─── Type scale (semantic vars) ─── */
  --type-display-size: 56px; --type-display-lh: 64px;   /* H1 hero */
  --type-h2-size: 48px;      --type-h2-lh: 56px;
  --type-h3-size: 32px;      --type-h3-lh: 40px;
  --type-h4-size: 28px;      --type-h4-lh: 36px;
  --type-h5-size: 24px;      --type-h5-lh: 32px;
  --type-title1-size: 20px;  --type-title1-lh: 28px;     /* page title */
  --type-title2-size: 18px;  --type-title2-lh: 28px;     /* card title */
  --type-body1-size: 16px;   --type-body1-lh: 24px;
  --type-body2-size: 14px;   --type-body2-lh: 20px;
  --type-caption-size: 12px; --type-caption-lh: 16px;
  --type-outline-size: 10px; --type-outline-lh: 12px;    /* uppercase tags */

  /* ─── Shadows (light, flat by default — used sparingly) ─── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-sheet: 0 -8px 24px rgba(0,0,0,0.08); /* bottom sheets */
}

/* =============================================================
   DARK MODE OVERRIDES (secondary)
   ============================================================= */
[data-theme="dark"] {
  --bg-1: #0A0A0C;
  --bg-2: #1B1D21;
  --bg-3: #32353C;
  --bg-accent: #196DFE;
  --bg-popup: #17171A;
  --bg-disabled: #444D5A;
  --bg-inverted: #F4F6F7;

  --text-primary: #F2F3F5;
  --text-secondary: #A1A1A1;
  --text-placeholder: #666666;
  --text-disabled: #666666;
  --text-accent: #196DFE;
  --text-link: #1E88FF;

  --line-divider: #242529;
  --line-accent: #196DFE;

  --text-green: #10D782;
  --text-red: #FF5D66;
  --text-yellow: #FFD200;
  --bg-green: #10D782;
  --bg-red: #FF5D66;
  --bg-yellow: #FFD200;
}

/* =============================================================
   BASE TYPOGRAPHY
   ============================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--type-body1-size);
  line-height: var(--type-body1-lh);
  color: var(--text-primary);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { font-family: var(--font-title); font-weight: var(--fw-bold); color: var(--text-primary); margin: 0; }
h1 { font-size: var(--type-display-size); line-height: var(--type-display-lh); letter-spacing: -0.02em; }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: -0.01em; }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); letter-spacing: -0.01em; }
h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }

/* =============================================================
   SEMANTIC HELPER CLASSES (mirror finpath-base.css conventions)
   ============================================================= */
.fp-title1 { font-family: var(--font-title); font-size: var(--type-title1-size); line-height: var(--type-title1-lh); font-weight: var(--fw-bold); }
.fp-title2 { font-family: var(--font-title); font-size: var(--type-title2-size); line-height: var(--type-title2-lh); font-weight: var(--fw-bold); }
.fp-body1  { font-family: var(--font-body); font-size: var(--type-body1-size); line-height: var(--type-body1-lh); }
.fp-body2  { font-family: var(--font-body); font-size: var(--type-body2-size); line-height: var(--type-body2-lh); }
.fp-caption{ font-family: var(--font-body); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }
.fp-outline{ font-family: var(--font-body); font-size: var(--type-outline-size); line-height: var(--type-outline-lh); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-bold); }

.fp-regular  { font-weight: var(--fw-regular); }
.fp-medium   { font-weight: var(--fw-medium); }
.fp-semibold { font-weight: var(--fw-semibold); }
.fp-bold     { font-weight: var(--fw-bold); }
.fp-extrabold{ font-weight: var(--fw-extrabold); }

.fp-text-primary    { color: var(--text-primary); }
.fp-text-secondary  { color: var(--text-secondary); }
.fp-text-placeholder{ color: var(--text-placeholder); }
.fp-text-accent     { color: var(--text-accent); }
.fp-text-link       { color: var(--text-link); }
.fp-text-green      { color: var(--text-green); }     /* TĂNG */
.fp-text-red        { color: var(--text-red); }       /* GIẢM */
.fp-text-yellow     { color: var(--text-yellow); }    /* tham chiếu */
.fp-text-blue       { color: var(--text-blue); }
.fp-text-purple     { color: var(--text-purple); }
.fp-text-orange     { color: var(--text-orange); }