/* ==========================================================================
   Pountain design tokens (ui-core)
   Every value here was measured on the reference app over CDP on 2026-09-11 and
   is recorded in the measurements doc in docs/. The reference navy primary is
   swapped for the Pountain logo green. Change a value there and here together.

   Breakpoints (CSS custom properties cannot be used inside @media, so they are
   listed here; use these exact numbers, min-width = at or above):
     400   detail: the idea clamps to 5 lines with "Show more" only below this
     600   header 68 -> 76 px tall; gutters 24 -> 32 (header, footer) and 24 -> 40 (page content)
     640   wordmark shows next to the mark; modals become centered cards (bottom sheets below)
     720   the search box moves into the header (below it on /app, an icon button elsewhere)
     760   app footer shows copyright + version; site footer links join the brand row;
           site footer risk grid 1 -> 2 columns; detail page goes two-column
     768   header shows the Portfolio link when connected
     800   markets list switches to the desktop row (sparkline, return, Trade on the right)
     880   the "/" key hint shows inside the search box
     1024  the $POUNTAIN token chip shows in the header
     1100  site footer risk grid 2 -> 4 columns; containers stop growing
   Tap targets are at least 40x40 below 640 (gate), even where the reference uses 34 to 38.
   ========================================================================== */

@font-face {
  font-family: "Mori";
  src: url("/fonts/PPMori-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mori";
  src: url("/fonts/PPMori-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --page: #0A0B0D;            /* page and header background */
  --card: #141519;            /* filled cards, inputs, popovers, row hover */
  --border: #212329;          /* every 1px hairline */
  --border-soft: rgba(33, 35, 41, 0.6);   /* site footer rules */
  --elevated: #2A2C32;        /* toasts, active range tab pill, cover placeholder */
  --hole: #0F1013;            /* 404 icon circle */
  --hover-wash: rgba(255, 255, 255, 0.04);  /* hover on transparent controls */
  --press-wash: rgba(255, 255, 255, 0.07);

  /* ---- text (contrast on --page / on --card) ---- */
  --ink: #ECECEE;             /* 17.1 / 15.7 */
  --ink-2: #B4B4BA;           /* 9.6 / 8.8  secondary text, footer links */
  --muted: #9A9AA0;           /* 7.0 / 6.4  labels, meta, placeholders */
  --muted-2: #88888E;         /* 5.6 / 5.1 */
  --neutral: #6B6B72;         /* 3.7: icons and non-text only, never body text */

  /* ---- market colors ---- */
  --up: #2EE27E;              /* return text, sparkline */
  --up-line: #16C568;         /* detail chart line */
  --down: #D45555;            /* negative return text, measured: 4.9 on page, 4.55 on card */
  --down-line: #D45555;
  --down-ink: #E27A7A;        /* small negative text on raised surfaces (5.7 on a hovered popover row) */
  --danger: #B54444;          /* destructive fills and borders only (3.6 on page: not for small text) */
  --danger-ink: #E46B6B;      /* error text: 6.2 on page (AA lift of --danger) */
  --up-wash: rgba(46, 226, 126, 0.08);
  --down-wash: rgba(212, 85, 85, 0.08);

  /* ---- accent: the reference navy #2B396D / #3A4D88 / #7E8FBE becomes logo green ---- */
  --accent: #216B41;          /* filled accent buttons */
  --accent-hover: #267A4B;
  --accent-ink: #E3F5EA;      /* text on --accent: 5.7 */
  --accent-soft: #7CCB9C;     /* links and highlights on dark: 9.6 on page, 8.8 on card */
  --ring: #2F9A5F;            /* focus rings: 5.5 on page */
  --accent-wash: rgba(33, 107, 65, 0.16);
  --accent-line: rgba(47, 154, 95, 0.45);
  --selection: rgba(47, 154, 95, 0.35);

  /* ---- controls ---- */
  --light-btn: #E4E4E4;       /* Sign in and Trade (measured #E4E4E4, not #ECECEE) */
  --light-btn-hover: #F2F2F2;
  --light-btn-ink: #0A0B0D;
  --outline-hover: #B4B4BA;   /* bordered button border on hover */
  --seg-on-bg: rgba(156, 156, 164, 0.14);     /* active segment (1x, Balanced) */
  --seg-on-border: rgba(156, 156, 164, 0.35);
  --field-focus: #9A9AA0;     /* input box border while focused */
  --option-border: #9A9AA0;   /* wallet rows in the Sign in modal */
  --watermark: rgba(154, 154, 160, 0.1);

  /* ---- overlays and depth ---- */
  --scrim: rgba(10, 11, 13, 0.55);
  --scrim-blur: 3px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.45);

  /* ---- radii ---- */
  --radius-xs: 4px;           /* key hint, focus outline, icon tiles */
  --radius-sm: 6px;           /* segments */
  --radius: 8px;              /* buttons, inputs, header search */
  --radius-cover: 9px;        /* 44px list covers */
  --radius-md: 10px;          /* modal rows, textarea, accent button, phone search */
  --radius-lg: 12px;          /* list card, mandate box, activity card, toasts, 96px cover */
  --radius-xl: 14px;          /* trade card */
  --radius-2xl: 16px;         /* modal card, form card */
  --radius-pill: 999px;

  /* ---- type ---- */
  --font: "Mori", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- layout ---- */
  --container: 1036px;        /* header and footer content width (x 202..1238 at 1440) */
  --content: 1020px;          /* page content width (x 210..1230 at 1440) */
  --gutter: 24px;             /* phone gutter everywhere */
  --gutter-x: 24px;           /* header/footer side padding: 32 at >= 600 */
  --gutter-content: 24px;     /* page content side padding: 40 at >= 600 */
  --header-h: 68px;           /* bar height without the 1px border: 76 at >= 600 */
  --scrollbar-comp: 0px;      /* set by shell.js while a modal locks scrolling */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- z-index scale ---- */
  --z-raised: 1;
  --z-sticky: 40;             /* page-level sticky bits (phone trade bar) */
  --z-header: 50;             /* measured header z-index */
  --z-dropdown: 60;           /* search results, account menu */
  --z-overlay: 1000;          /* modal scrim */
  --z-modal: 1001;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);     /* row hover (400ms), brand nudge */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* masthead rise, popovers */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* sparkline fade, ring pulse */
  --ease-thought: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms;             /* link color */
  --dur-2: 160ms;             /* buttons, borders, key hint */
  --dur-3: 200ms;             /* modal rows, toasts in */
  --dur-4: 260ms;             /* meta line fade */
  --dur-row: 400ms;           /* list row background */
  --dur-page: 180ms;          /* page-fade-in */
}

@media (min-width: 600px) {
  :root {
    --gutter-x: 32px;
    --gutter-content: 40px;
    --header-h: 76px;
  }
}