/*
 * Shared design tokens — the theme contract for the `ev::uikit` (Rust) and
 * `@evinvest/uikit` (TypeScript) components. Import this file from any Tailwind v4
 * entrypoint. Kept byte-for-byte in parity with `@evinvest/uikit`'s
 * `styles/tokens.css`; change one, change the other.
 *
 * Structure:
 *   @theme inline {}  — wires values into Tailwind utilities (processed by
 *                       Tailwind v4; ignored as unknown at-rule by browsers)
 *   :root {}          — raw CSS custom properties; work everywhere
 */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-playfair), "Playfair Display", ui-serif, Georgia, serif;
  --font-mono: var(--font-inter), "Inter", ui-monospace, monospace;

  /* shadcn semantic utilities */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* sidebar utilities (PC) */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /*
   * Brand palette — navy-led institutional base + tiered Vietnam-inspired accents.
   * Named by ROLE, not hue. Tier hierarchy:
   *   t1 (Ha Long Teal)  — recurring workhorse: labels, nav, secondary numbers
   *   t2 (Jungle Green)  — positive financial signals: yields, growth %, FDI
   *   t3 (Rice Gold)     — headline return figures: IRR, ROI, appreciation
   *   t4 (Lotus Pink)    — ≤1 per section; the punctuation jewel
   */
  --color-main-brand: #001e4e;
  --color-main-black: #070d18;
  --color-main-surface: #081020;
  --color-main-card: #0c1626;
  --color-main-mist: #e6e1d3;
  --color-main-accent-t1: #2a9d8f;
  --color-main-accent-t2: #2e9e5b;
  --color-main-accent-t3: #f2c94c;
  --color-main-accent-t4: #e58aae;
}

:root {
  /* ── shadcn semantic tokens ──────────────────────────────────── */
  --background: #070d18;
  --foreground: white;
  --card: #0c1626;
  --card-foreground: white;
  --popover: #0c1626;
  --popover-foreground: white;
  --primary: #001e4e;
  --primary-foreground: #e6e1d3;
  --secondary: #081020;
  --secondary-foreground: white;
  --muted: #16213a;
  --muted-foreground: color-mix(in srgb, #e6e1d3 40%, transparent);
  --accent: color-mix(in srgb, #e6e1d3 8%, transparent);
  --accent-foreground: white;
  --destructive: #da251d;
  --destructive-foreground: #e6e1d3;
  --border: color-mix(in srgb, #e6e1d3 10%, transparent);
  --input: color-mix(in srgb, #e6e1d3 20%, transparent);
  --ring: #2a9d8f;
  --radius: 0.375rem; /* 6px on mobile; bumped to 8px ≥ sm (see @media below) */

  /* ── sidebar (PC nav) ───────────────────────────────────────── */
  --sidebar: #0c1626;
  --sidebar-foreground: white;
  --sidebar-primary: #001e4e;
  --sidebar-primary-foreground: #e6e1d3;
  --sidebar-accent: color-mix(in srgb, #e6e1d3 8%, transparent);
  --sidebar-accent-foreground: white;
  --sidebar-border: color-mix(in srgb, #e6e1d3 10%, transparent);
  --sidebar-ring: #2a9d8f;
  --sidebar-width: 14rem;

  /* ── page container — responsive gutter + max width (uikit <Container>) ─ */
  --page-max: 90rem; /* 1440px */
  --page-px: 1rem; /* 16px — mobile gutter, scales up below */
}

/* Mobile-first scale-ups: roomier gutters + slightly larger radii on bigger
   viewports. Lives here (not per-component) so every consumer scales alike. */
@media (min-width: 640px) {
  :root {
    --radius: 0.5rem;
    --page-px: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-px: 3rem;
  }
}
