/* pgl-tokens.css — Paramount design-system tokens for finance.pglogs.com (PR-UI-0, 23/10/2026).
   Part 1 = tokens/{fonts,colors,typography,spacing,radius,elevation,motion,base}.css VERBATIM (cat, in that order).
   Part 2 = finance additions (semantic aliases, v2 legacy remap, compact density, dark block). Nothing here applies
   unless index.html enables the sheet: the <link> ships media="not all" and the head bootstrap flips it to "all"
   unless localStorage.pgl_ui_v2 === '0' (PR-UI-F: v2 is the default; base.css is global — body/h1/a rules — so it must NOT apply flag-off). */

/* ===== tokens/fonts.css (verbatim) ===== */
/* PGLogs webfonts — Montserrat (display) + Roboto (UI/body), per brand sheet section 4.
   Served from Google Fonts. Replace these @import lines with self-hosted @font-face
   rules if the brand licences its own copies. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;1,800&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap");

:root{
  --font-display:"Montserrat","Roboto","Helvetica Neue",Arial,sans-serif;
  --font-body:"Roboto","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --weight-display:800; /* @kind other */
  --weight-heading:700; /* @kind other */
  --weight-medium:500; /* @kind other */
  --weight-body:400; /* @kind other */
}

/* ===== tokens/colors.css (verbatim) ===== */
/* Brand palette locked to DEMO_LOGO_Option3 sheet, section 3.
   Navy is the interface ground (customer decision), gold the accent. */
:root{
  /* gold — brand primary */
  --gold-100:#FFF6E0;
  --gold-200:#FFE9B0;
  --gold-300:#FFD24D;
  --gold-400:#FDBB13;
  --gold-500:#F5A623;
  --gold-600:#D2870A;
  --gold-700:#A66805;

  /* navy — interface ground */
  --navy-100:#E7EBF3;
  --navy-200:#C3CCDF;
  --navy-500:#2A5497;
  --navy-600:#1E4079;
  --navy-700:#16305F;
  --navy-800:#0F2044;
  --navy-900:#0A1730;

  /* neutrals */
  --ink-900:#1A1A1A;
  --ink-700:#3B3B3F;
  --ink-500:#666666;
  --ink-400:#8A8A90;
  --ink-300:#B4B4BB;
  --line-200:#D9D9DD;
  --line-100:#E9EAEE;
  --grey-050:#F4F5F7;
  --white:#FFFFFF;

  /* semantic hues */
  --success-500:#12A150;
  --success-100:#E3F6EA;
  --warning-500:#F5A623;
  --warning-100:#FFF2DA;
  --danger-500:#E0393E;
  --danger-100:#FCE7E7;
  --info-500:#2A5497;
  --info-100:#E7EDF8;

  /* ---- semantic aliases: use these in components ---- */
  --brand:var(--gold-400);
  --brand-hover:var(--gold-500);
  --brand-press:var(--gold-600);
  --brand-soft:var(--gold-100);
  --brand-ink:var(--navy-900);

  --ground:var(--navy-800);
  --ground-deep:var(--navy-900);
  --ground-raised:var(--navy-700);

  --surface-page:var(--grey-050);
  --surface-card:var(--white);
  --surface-sunken:var(--grey-050);
  --surface-inverse:var(--navy-800);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-on-brand:var(--navy-900);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:#A9B4CC;
  --text-link:var(--navy-600);
  --text-link-hover:var(--gold-600);

  --border-subtle:var(--line-100);
  --border-default:var(--line-200);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(255,255,255,.14);
  --focus-ring:var(--gold-400);

  --status-transit:var(--info-500);
  --status-delivered:var(--success-500);
  --status-pending:var(--warning-500);
  --status-problem:var(--danger-500);
}

/* ===== tokens/typography.css (verbatim) ===== */
:root{
  --text-display-1:44px; --lh-display-1:1.06; /* @kind other */ --ls-display-1:-0.02em; /* @kind other */
  --text-display-2:34px; --lh-display-2:1.10; /* @kind other */ --ls-display-2:-0.015em; /* @kind other */
  --text-h1:26px;  --lh-h1:1.20; /* @kind other */  --ls-h1:-0.01em; /* @kind other */
  --text-h2:21px;  --lh-h2:1.28; /* @kind other */  --ls-h2:-0.005em; /* @kind other */
  --text-h3:17px;  --lh-h3:1.35; /* @kind other */  --ls-h3:0em; /* @kind other */
  --text-body-lg:16px; --lh-body-lg:1.62; /* @kind other */
  --text-body:15px;    --lh-body:1.60; /* @kind other */
  --text-sm:13px;      --lh-sm:1.50; /* @kind other */
  --text-caption:12px; --lh-caption:1.40; /* @kind other */
  --text-overline:11px; --ls-overline:0.16em; /* @kind other */
  --text-mono:13px; --ls-mono:0.02em; /* @kind other */
}

/* ===== tokens/spacing.css (verbatim) ===== */
:root{
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10:64px; --space-11:80px; --space-12:112px;

  --gutter-page:24px;      /* mobile page inset */
  --gutter-page-lg:40px;   /* desktop page inset */
  --max-content:1200px;
  --max-prose:680px;
  --control-h-sm:32px;
  --control-h-md:40px;
  --control-h-lg:48px;
  --tap-min:44px;          /* never smaller on touch */
  --sidebar-w:248px;
  --topbar-h:64px;
}

/* ===== tokens/radius.css (verbatim) ===== */
:root{
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;   /* default: controls, inputs, small cards */
  --radius-lg:14px;   /* cards, panels */
  --radius-xl:20px;   /* modals, hero panels */
  --radius-pill:999px;
  --border-w:1px; /* @kind spacing */
  --border-w-strong:2px; /* @kind spacing */
}

/* ===== tokens/elevation.css (verbatim) ===== */
:root{
  --shadow-xs:0 1px 2px rgba(15,32,68,.06);
  --shadow-sm:0 2px 6px rgba(15,32,68,.08);
  --shadow-md:0 6px 16px rgba(15,32,68,.10);
  --shadow-lg:0 16px 40px rgba(15,32,68,.14);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-brand:0 6px 18px rgba(253,187,19,.34);
  --ring-focus:0 0 0 3px rgba(253,187,19,.45);
  --scrim:rgba(10,23,48,.56); /* @kind color */
  --blur-glass:saturate(140%) blur(14px); /* @kind other */
}

/* ===== tokens/motion.css (verbatim) ===== */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-entrance:cubic-bezier(.16,1,.3,1); /* @kind other */
  --lift-hover:translateY(-1px); /* @kind other */
  --press-scale:.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--lift-hover:none; /* @kind other */--press-scale:1 /* @kind other */}
}

/* ===== tokens/base.css (verbatim) ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);margin:0;letter-spacing:-0.01em}
h1{font-size:var(--text-h1);line-height:var(--lh-h1);font-weight:var(--weight-display)}
h2{font-size:var(--text-h2);line-height:var(--lh-h2);font-weight:var(--weight-heading)}
h3{font-size:var(--text-h3);line-height:var(--lh-h3);font-weight:var(--weight-heading)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
img,svg{max-width:100%}
::selection{background:var(--gold-200);color:var(--navy-900)}
.pg-overline{font-family:var(--font-display);font-weight:var(--weight-heading);font-size:var(--text-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}
.pg-mono{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--ls-mono)}
.pg-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Part 2 · finance additions ===================================================== */

/* (a) finance semantic aliases — the names the shell and the F0 bridge already use, pointed at DS tokens.
   Scoped to html[data-ui="v2"]: index.html's own :root defines the same 18 names and loads later, so a plain :root block here would lose (review C3). */
:root{
  --danger-text:#D6353A;
  --warning-text:#A66805;
  --success-text:#0E7F3F;   /* 5.09:1 on white; --success-500 #12A150 is only 3.37:1 as text (review R2-C6) */
}
html[data-ui="v2"]{
  /* text-on-white steps: #D6353A 4.74:1, #A66805 (= --gold-700) 4.56:1 on #FFFFFF. The proposal's #B86E02 measures 3.99:1 (< AA) — replaced (review C4). */
  --pos:var(--success-text);   --pos-bg:var(--success-100);   --pos-bd:#B7E4C7;
  --neg:var(--danger-text);   --neg-bg:var(--danger-100);   --neg-bd:#F5B5B7;
  --est:var(--warning-text);  --est-bg:var(--warning-100);   --est-bd:#F6D79B;
  --cash:var(--navy-500);     --cash-bg:var(--info-100);     --cash-bd:#C3CCDF;  /* purple leaves the palette */
  --ctl:var(--navy-600);      --ctl-bg:var(--navy-100);      --ctl-bd:var(--navy-200);
  --warn:var(--gold-700);     --warn-bg:var(--warning-100);  --warn-bd:#F6D79B;
}

/* (b) legacy alias block — remaps the shell's legacy names (index.html :root) to the proposal §3 values.
   Scoped to html[data-ui="v2"] (specificity 0,1,1 beats the page's own :root). Names that the DS ALSO defines
   (--navy-900/700/600, --gold-100/500/600, --ink-*) are restated as LITERAL DS values — `--x:var(--x)` would be
   a self-reference cycle (invalid) and a different value would silently re-tint every DS component. */
html[data-ui="v2"]{
  --bg:#F4F5F7; --bg2:#FFFFFF; --surface:#FFFFFF;
  --border:#E9EAEE; --border2:#D9D9DD; --border-strong:#D9D9DD;
  --txt:#1A1A1A; --txt2:#3B3B3F; --muted:#8A8A90;
  --green:#0E7F3F;  --green-bg:rgba(14,127,63,.08);
  --red:#D6353A;    --red-bg:rgba(214,53,58,.08);
  --blue:#0F2044;   --blue-bg:rgba(15,32,68,.08);          /* secondary action = navy-800; the ONE primary button is gold (.btn-gold) */
  --yellow:#A66805; --yellow-bg:rgba(166,104,5,.08);
  --purple:#2A5497; --purple-bg:rgba(42,84,151,.08);       /* purple leaves the palette → navy-500 */
  --cyan:#2A5497;   --cyan-bg:rgba(42,84,151,.08);
  --orange:#D2870A; --orange-bg:rgba(210,135,10,.08);
  --shadow:0 2px 6px rgba(15,32,68,.08); --shadow-md:0 6px 16px rgba(15,32,68,.10);
  --radius:14px;
  /* DS-colliding names: literal DS values */
  --navy-900:#0A1730; --navy-700:#16305F; --navy-600:#1E4079;
  --gold-500:#F5A623; --gold-600:#D2870A; --gold-100:#FFF6E0;
  --ink-900:#1A1A1A; --ink-700:#3B3B3F; --ink-500:#666666; --ink-400:#8A8A90;
}

/* shell tokens (from the approved mock, direction A .frame{--f-*}) */
html[data-ui="v2"]{
  --f-page:#F4F5F7; --f-card:#FFFFFF; --f-line:#E9EAEE; --f-line2:#D9D9DD;
  --f-ink:#1A1A1A; --f-ink2:#3B3B3F; --f-ink3:#666666; --f-ink4:#8A8A90;
  --f-sb-bg:#0F2044; --f-sb-ink:#A9B4CC; --f-sb-ink-strong:#FFFFFF; --f-sb-line:rgba(255,255,255,.12); --f-sb-hover:rgba(255,255,255,.08);
  --f-sb-active-bg:#FDBB13; --f-sb-active-ink:#0A1730; --f-sb-w:248px;
  --f-tb-bg:#FFFFFF; --f-tb-ink:#1A1A1A; --f-tb-h:64px; --f-tb-line:#E9EAEE;
  --f-nav-100:#E7EBF3; --f-navy:#0F2044; --f-navy3:#2A5497; --f-gold:#FDBB13; --f-gold2:#F5A623; --f-gold3:#D2870A; --f-gold100:#FFF6E0;
  --f-good:#12A150; --f-good-bg:#E3F6EA; --f-warn:#A66805; --f-warn-bg:#FFF2DA; --f-bad:#D6353A; --f-bad-bg:#FCE7E7; --f-info:#2A5497; --f-info-bg:#E7EDF8;
  --f-sh:0 2px 6px rgba(15,32,68,.08); --f-radius:14px; --f-radius-sm:10px;
  --f-fs:14px; --f-row:46px; --f-pad:24px; --f-gap:20px; --f-kpi:25px;
}

/* (c) compact density — row / type / padding tokens from the mock's .dir-b block (colours and sidebar width stay direction A) */
html[data-ui="v2"][data-density="compact"]{
  --f-fs:13px; --f-row:36px; --f-pad:20px; --f-gap:14px; --f-kpi:23px; --f-radius:10px; --f-radius-sm:8px;
}

/* (d) dark theme — copied from the mock's .dir-c block. NOT wired to any UI in PR-UI-0 (PR-UI-D adds the toggle). */
[data-theme="dark"]{
  --f-page:#0A1730; --f-card:#0F2044; --f-line:#223558; --f-line2:#2E4470;
  --f-ink:#F2F4F8; --f-ink2:#D5DAE6; --f-ink3:#A9B4CC; --f-ink4:#7E8AA6;
  --f-sb-bg:#071024; --f-sb-ink:#A9B4CC; --f-sb-ink-strong:#FFFFFF; --f-sb-line:rgba(255,255,255,.10); --f-sb-hover:rgba(255,255,255,.07);
  --f-tb-bg:#0F2044; --f-tb-ink:#F2F4F8; --f-tb-line:#223558;
  --f-nav-100:#16305F; --f-navy:#F2F4F8; --f-navy3:#8FA3CB; --f-gold100:#3A2E10;
  --f-good:#3BC273; --f-good-bg:#10351F; --f-warn:#FDBB13; --f-warn-bg:#3A2E10; --f-bad:#F06A6E; --f-bad-bg:#3C1719; --f-info:#8FA3CB; --f-info-bg:#16305F;
  --f-sh:0 2px 6px rgba(0,0,0,.35);
  --f-chart-seq-1:#2E4470; --f-chart-seq-2:#3F5C8F; --f-chart-seq-3:#5B7BB5; --f-chart-seq-4:#8FA3CB; --f-chart-seq-5:#FDBB13;
  --f-chart-pos:#8FA3CB; --f-chart-neg:#F06A6E; --f-chart-grid:#223558; --f-chart-muted:#2E4470;
  color-scheme:dark;
}