/*
 * member theme — portal-local palette tokens.
 *
 * Source of truth: the "NV Trade Pro markets page" design bundle (7 self-contained
 * pages: Markets, Platform, About US, Terms, Risk Disclosure, Privacy Policy, Cookie
 * Policy). That export carries NO token CSS — every value below was read off the
 * design's inline styles, so this file is the first place those hex values become
 * tokens.
 *
 * Canonical token NAMES follow the project schema (same names the shared head /
 * chrome consume). Values are the NV Trade Pro dark-green palette:
 *   accent green  #2BBA33 -> --primary-color, --tertiary-color, --btn-primary-bg-color,
 *                            --hyperlink-text-color, --color-brand-primary
 *   page bg       #050A06 -> --primary-bg-color, --default-bg-color
 *   card bg       #0B140C -> --secondary-bg-color, --default-secondary-bg-color
 *   footer bg     #070D08 -> --footer-bg-color (footer is DARK in this design)
 *   hairline      #121D14 -> --primary-border-color, --default-border
 *   card border   #16241A -> --e-card-border (see --nv-* block)
 *   ink           #E9F0EA -> --primary-text-color
 *   body text     #A7B8A9 -> --fourth-text-color, --color-text-muted
 *
 * --font-scale is 1: the design specifies exact px sizes, so scaling every
 * --*-text-size would drift the pages away from the export.
 *
 * Paradigm: pages consume these via Tailwind arbitrary values —
 *   bg-[color:var(--nv-card-bg)] / text-[color:var(--nv-accent)]
 * No custom CSS class definitions live here (see css/input.css for the three
 * exceptions Tailwind cannot express).
 *
 * Changelog:
 * v1.0.0 - 2026-08-03 - Created for the NV Trade Pro build.
 */

:root{
    /* Portal-wide font scale. The design specifies exact px sizes, so this is 1 —
       raising it rescales every --*-text-size / --fs-* below. */
    --font-scale: 1;
    --fs-10: calc(10px * var(--font-scale));
    --fs-12: calc(12px * var(--font-scale));
    --fs-16: calc(16px * var(--font-scale));
    --fs-20: calc(20px * var(--font-scale));
    --fs-22: calc(22px * var(--font-scale));
    --fs-26: calc(26px * var(--font-scale));
    --fs-28: calc(28px * var(--font-scale));
    --fs-34: calc(34px * var(--font-scale));
    --fs-40: calc(40px * var(--font-scale));
    --fs-42: calc(42px * var(--font-scale));
    --fs-52: calc(52px * var(--font-scale));
    --fs-64: calc(64px * var(--font-scale));

    /*theme-color*/
    --primary-color : #2BBA33;
    --secondary-color: #050A06;
    --tertiary-color: #2BBA33;
    --fourth-color: #0B140C;
    --fifth-color: #070D08;
    --sixth-color: #0E1A10;
    /* Functional triad — the design shows no error / warning / success state, so these
       are conventional values kept for the shared chrome, not design-derived. */
    --error-color: #E5484D;
    --warning-color: #E0A800;
    --success-color: #2BBA33;
    --hyperlink-text-color: #2BBA33;

 /*webpage*/
    --default-border: 1px solid #121D14;
    --default-bg-color: #050A06;
    --default-primary-bg-color: #0B140C;
    --default-secondary-bg-color: #091009;
    --default-primary-text-color: #E9F0EA;
    --default-secondary-text-color: #04170A;
    --primary-border-color: #121D14;
    --primary-bg-color : #050A06;
    --secondary-bg-color: #0B140C;
    --primary-text-color: #E9F0EA;
    --secondary-text-color : #04170A;
    --tertiary-text-color : #2BBA33;
    --fourth-text-color : #A7B8A9;
    --fifth-text-color : #93A697;
    --onhover-text-color: #52D65A;
    --default-border-radius: 20px;
    --xl-text-size: calc(24px * var(--font-scale));
    --lg-text-size: calc(18px * var(--font-scale));
    --md-text-size: calc(15px * var(--font-scale));
    --sm-text-size: calc(13px * var(--font-scale));
    --xs-text-size: calc(11px * var(--font-scale));
    --header-height: auto;
    --border-radius-xs: 11px;
    --border-radius-md: 14px;
    --border-radius-lg: 20px;
    --border-radius-pill: 999px;

/* font-weight */
    --default-font-weight-thin: 400;
    --default-font-weight-medium: 500;
    --default-font-weight-thick: 600;
    --default-font-weight-bold: 700;
    --default-font-weight-max: 800;

/*button*/
    --btn-primary-bg-color :  #2BBA33;
    --btn-secondary-bg-color : #0B130C;
    --btn-tertiary-bg-color : transparent;
    --btn-disabled-bg-color : #16241A;
    --btn-onHover-primary-bg-color : #52D65A;
    --btn-onHover-secondary-bg-color : #132015;
    --btn-onHover-tertiary-bg-color : #132015;
    --btn-primary-text-color: #04170A;
    --btn-secondary-text-color: #D7E2D8;
    --btn-tertiary-text-color: #2BBA33;
    --btn-disabled-text-color: #7E8F80;
    --btn-onHover-primary-text-color : #04170A;
    --btn-onHover-secondary-text-color : #2BBA33;
    --btn-onHover-tertiary-text-color : #52D65A;
    --btn-width-long: 200px;
    --btn-width-short: 120px;
    --btn-border-radius: 999px;
    --button-border: 1px solid #24332A;
    --btn-font-size : 15.5px;

/*input*/
    --input-label-size: 13px;
    --input-text-size: calc(15px * var(--font-scale));
    --input-border-radius: 12px;
    --input-border : 1px solid #24332A;
    --input-bg-color : #0A120B;
    --input-width-long: '';
    --input-width-short: '';
    --input-placeholder-size: 15px;
    --input-placeholder-color: #7E8F80;
    --input-disabled-bg-color: #0B130C;
    --input-onfocus-border-color: #2BBA33;

/*header*/
    --header-bg-color: rgba(5,10,6,0.94);
    --header-text-size: calc(14.5px * var(--font-scale));
    --header-text-color: #BAC8BB;
    --header-onHover-color: #2BBA33;

/*footer — DARK in this design*/
    --footer-bg-color: #070D08;
    --footer-text-size: calc(13.5px * var(--font-scale));
    --footer-text-color: #8D9E8F;
    --footer-onHover-color: #2BBA33;

/*listing — the legal-page data tables*/
    --listing-header-color: #0E1A10;
    --listing-row-primary-color: #0B130C;
    --listing-row-secondary-color: #091009;
    --listing-header-child-color: #BAC8BB;
    --listing-header-text-size: calc(11.5px * var(--font-scale));
    --listing-row-text-size: calc(13px * var(--font-scale));

    /* ── Non-canonical extension — prefix: --nv-* (NV Trade Pro design system) ───
       The design's own surface / border / text ladder. Pages consume these via
       arbitrary-value Tailwind, e.g. bg-[color:var(--nv-card-bg)],
       font-[family-name:var(--nv-font-display)]. */

    /* Brand */
    --nv-accent:            #2BBA33;
    --nv-accent-hover:      #52D65A;
    --nv-accent-ink:        #04170A;   /* text ON the accent fill */
    --nv-accent-surface:    #0A3312;   /* icon-tile fill */
    --nv-accent-border:     #1A4A23;   /* icon-tile / dropdown border */
    --nv-accent-deep:       #0A3D12;   /* hero radial core */
    --nv-selection-ink:     #051506;

    /* Surfaces */
    --nv-page-bg:           #050A06;
    --nv-nav-bg:            rgba(5,10,6,0.94);
    --nv-drawer-bg:         #070D08;
    --nv-footer-bg:         #070D08;
    --nv-card-bg:           #0B140C;
    --nv-card-bg-end:       #091009;   /* card gradient stop */
    --nv-panel-bg:          #0B130C;   /* chips, table odd rows */
    --nv-inset-bg:          #0A120B;   /* check-list rows */
    --nv-table-head-bg:     #0E1A10;
    --nv-menu-bg:           #0B140C;
    --nv-menu-hover:        #132015;   /* dropdown row hover fill */

    /* Borders */
    --nv-hairline:          #121D14;   /* section rules, dividers */
    --nv-card-border:       #16241A;
    --nv-chip-border:       #24332A;

    /* Text */
    --nv-ink:               #E9F0EA;
    --nv-ink-strong:        #D7E2D8;
    --nv-body:              #A7B8A9;
    --nv-body-soft:         #93A697;
    --nv-muted:             #8D9E8F;
    --nv-muted-soft:        #7E8F80;
    --nv-muted-dim:         #728176;
    --nv-muted-dimmer:      #5E6D60;
    --nv-toc-num:           #3B5440;
    --nv-nav-link:          #BAC8BB;

    /* Composite backgrounds. The export repeats these verbatim across pages;
       tokenising keeps the gradient stacks out of Tailwind arbitrary values. */
    --nv-hero-gradient: radial-gradient(120% 90% at 50% -10%, #0A3D12 0%, #050A06 60%);
    /* Full-bleed variant of the above, for a page that puts the glow on <body> rather
       than on a hero <section> (/bear). The hero gradient's ellipse is only 120% as wide
       as its box and fades out by 60%, so across a full viewport the top corners go
       nearly black and the glow reads as a centred blob. Widening the horizontal radius
       and pushing the stop out makes the falloff vertical-dominated, so the green spans
       edge to edge and fades downward. Separate token on purpose: --nv-hero-gradient is
       shared by pageHero on all nine other pages and must not shift. */
    --nv-page-glow:     radial-gradient(190% 105% at 50% -15%, #0A3D12 0%, #050A06 78%);
    --nv-card-gradient: linear-gradient(180deg, #0B140C 0%, #091009 100%);

    /* Shadows */
    --nv-menu-shadow: 0 20px 44px rgba(0,0,0,0.55);

    /* Chrome metrics */
    --nv-shell-max:  1240px;
    --nv-nav-pad-y:  14px;

    /* Type families */
    --nv-font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
    --nv-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --nv-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}