/* PALBON design tokens - the one master theme (PALBON-owned file, served as-is: no build).

   Loaded by every surface before that surface's own stylesheet, after the palette (palbon_palette.css):
     Desk ............ site_config app_include_css  (tools/apply_desk_theme.py)
     website, portal,  palbon_theme_head("site") - frappe/palbon_site/theme.py - in templates/includes/head.html,
     login, launcher . templates/palbon_site/base.html, www/login.html and www/apps.html
     product apps .... the <link>s in each app's index.html and its www page, versioned by palbon_theme_version()
   The colour theme is data-pb-theme on <html>, written by the server before the first paint (palbon_site/theme.py).

   It holds custom properties and the Inter face, and no rule that styles an element - loading it can
   never change a page by itself. A surface *maps* its own variables onto these (palbon_desk.css,
   palbon_site.css, ...), so a value is changed here, once.

   Naming: --pb-<group>-<step>. Groups: font, text, weight, tracking, leading, space, radius, line, shell (layout),
   z, ease / dur. Colour lives in palbon_palette.css (four themes x light / dark, one semantic set: --pb-bg-*,
   --pb-text-*, --pb-accent-*, --pb-border-*, --pb-status-*, --pb-shadow-*, --pb-chart-*, --pb-kpi-*); the
   colour names below are aliases of it. Light is the default; dark is keyed on [data-theme="dark"] (Desk,
   product apps), [data-ps-theme="dark"] (website, login) and [data-pl-theme="dark"] (launcher).

   A product's accent is opt-in: put data-pb-app="<product>" on <html> or <body> and use --pb-app-accent /
   --pb-app-accent-tint. Spacing, borders, shadows and containers stay global on purpose - an app may change
   its accent, never the grid. */

/* One variable file answers every weight, including the 420 body weight. The family name is "Inter" so the
   stack below reads exactly as specified; the file is the bundled one - nothing is fetched from outside. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/assets/frappe/css/fonts/inter/InterVariable.woff2") format("woff2-variations"),
	     url("/assets/frappe/css/fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("/assets/frappe/css/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
	     url("/assets/frappe/css/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
	/* ---- Font Stacks ---- */
	/* 1. system-ui: Modern Apple / Native OS target
	   2. -apple-system, BlinkMacSystemFont: Legacy Safari/Chrome Apple targets
	   3. "Inter": Self-hosted variable font for Windows/Linux/Android */
	--pb-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
	
	/* Apple-native Monospace with clean cross-platform fallbacks */
	--pb-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menal, Consolas, "Liberation Mono", monospace;
	
	--pb-text-2xs: 11px; /* section labels, table heads */
	--pb-text-xs: 12px; /* captions, pills */
	--pb-text-sm: 13px; /* side menu, dense rows */
	--pb-text-base: 14px; /* body, controls */
	--pb-text-menu: 15px; /* the main side menu's products (owner, 2026-10-07: larger, airier rows) */
	--pb-text-md: 16px; /* card titles */
	--pb-text-title: 18px; /* THE page title - Desk page head and the product apps' header alike */
	--pb-text-xl: 24px; /* KPI numbers, hero lines */

	--pb-weight-body: 420;
	--pb-weight-medium: 500; /* buttons, tabs, links in menus */
	--pb-weight-strong: 600; /* titles, current menu row, table heads */
	--pb-weight-heavy: 700; /* KPI numbers only */

	--pb-tracking: 0.02em; /* body and menus, Desk and product apps alike */
	--pb-tracking-title: -0.01em;
	--pb-tracking-caps: 0.06em;

	--pb-leading-tight: 1.25;
	--pb-leading: 1.5;

	/* ---- space: a 4 px grid ---- */
	--pb-space-1: 4px;
	--pb-space-2: 8px;
	--pb-space-3: 12px;
	--pb-space-4: 16px;
	--pb-space-5: 20px;
	--pb-space-6: 24px;
	--pb-space-8: 32px;
	--pb-space-10: 40px;

	/* ---- shape ---- */
	--pb-radius-sm: 6px; /* pills, inputs inside rows */
	--pb-radius: 9px; /* controls, menu rows */
	--pb-radius-md: 10px; /* dropdowns, fly-outs */
	/* --pb-radius-lg (cards, dialogs) is the theme's --pb-radius-card: set below */
	--pb-radius-pill: 999px;
	--pb-line-w: 1px;

	/* ---- layout: the shell ---- */
	--pb-shell-rail: 272px; /* owner, 2026-10-07: room for "PALBON-TradeFinance" */
	--pb-shell-rail-collapsed: 56px;
	--pb-shell-sub: 248px; /* contextual sidebar: list filters, form side panel */
	--pb-shell-topbar: 48px;
	--pb-shell-gutter: 24px;
	--pb-shell-row: 32px; /* side menu row height (measured on PALBONSupport) */
	--pb-control-h: 32px;

	/* ---- z order: one ladder, fitted around Bootstrap's (dropdown 1000, sticky 1020, backdrop 1040, modal 1050) ---- */
	--pb-z-sub: 5;
	--pb-z-pagehead: 6;
	--pb-z-topbar: 1021;
	--pb-z-rail: 1025;
	--pb-z-flyout: 1030;
	--pb-z-dropdown: 1035; /* header menus: above the rail and its fly-out, under a dialog's backdrop */
	--pb-z-drawer: 1038;

	/* ---- motion ---- */
	--pb-ease: cubic-bezier(0.2, 0, 0, 1);
	--pb-dur-1: 120ms; /* hover, press */
	--pb-dur-2: 180ms; /* menus, fly-outs */
	--pb-dur-3: 240ms; /* rail, drawers */

	/* ---- colour: every theme colour is a semantic variable of palbon_palette.css (generated from
	   palbon_utilities/tools/theme_tokens.py, all four themes x light / dark, contrast-checked). The names below
	   are the ones the stylesheets were written against; each is an alias, so it follows the theme. ---- */
	--pb-ink: var(--pb-text-primary);
	--pb-ink-muted: var(--pb-text-muted);
	--pb-ink-soft: var(--pb-text-soft);
	--pb-ink-link: var(--pb-text-link);
	--pb-ink-accent: var(--pb-text-highlight);
	--pb-ink-danger: var(--pb-text-danger);
	--pb-canvas: var(--pb-bg-main);
	--pb-royal: var(--pb-accent-vivid);
	--pb-indigo: var(--pb-accent-vivid);
	--pb-violet: var(--pb-accent-vivid);
	--pb-sky: var(--pb-accent-secondary);
	--pb-grad: var(--pb-grad-primary);
	--pb-grad-hover: var(--pb-grad-primary-hover);
	--pb-grad-vivid: var(--pb-grad-line);
	--pb-grad-brand-line: var(--pb-grad-line);
	--pb-aurora: var(--pb-ambient);
	--pb-sh-1: var(--pb-shadow-elevation-1);
	--pb-sh-2: var(--pb-shadow-elevation-2);
	--pb-sh-3: var(--pb-shadow-elevation-3);
	--pb-sh-glow: var(--pb-shadow-glow);
	--pb-focus: 0 0 0 3px var(--pb-focus-ring);
	--pb-radius-lg: var(--pb-radius-card);
	--pb-card-sheen: linear-gradient(180deg, color-mix(in srgb, var(--pb-bg-surface) 70%, transparent) 0%, transparent 40%);

	/* ---- fixed colours: the same in every theme, because they carry a meaning, not a look. Gold is "done /
	   paid / active" (green is not used in PALBON); the gold ink is the AAA ink on the gold fill. ---- */
	--pb-gold: #d4af37;
	--pb-gold-deep: #b59410;
	--pb-gold-soft: #f3dc8c;
	--pb-ink-on-gold: #2a2306;
	--pb-gold-dot: #6b5608; /* the status dot on a gold pill */
	--pb-gold-sheen: rgba(255, 255, 255, 0.55); /* the gold pill's top highlight */
	--pb-grad-gold: linear-gradient(135deg, #f7e7a6 0%, #e8c252 55%, #d4af37 100%);

	/* ---- product accent: the suite's royal blue unless a product is named ---- */
	--pb-app-accent-l: #2563eb;
	--pb-app-accent-d: #6ea8ff;
}

/* every product's accent: (light theme, dark theme) - copied from the public website's product pages
   (frappe/palbon_site/products/<slug>.py "accent"), the one source; change them there and copy them here */
[data-pb-app="sphere"] { --pb-app-accent-l: #2563eb; --pb-app-accent-d: #6ea8ff; }
[data-pb-app="people"] { --pb-app-accent-l: #c2410c; --pb-app-accent-d: #fb923c; }
[data-pb-app="campus"] { --pb-app-accent-l: #6d28d9; --pb-app-accent-d: #a78bfa; }
[data-pb-app="growth"] { --pb-app-accent-l: #a16207; --pb-app-accent-d: #e8b931; }
[data-pb-app="tradefinance"] { --pb-app-accent-l: #0369a1; --pb-app-accent-d: #38bdf8; }
[data-pb-app="support"] { --pb-app-accent-l: #0369a1; --pb-app-accent-d: #38bdf8; }
[data-pb-app="care"] { --pb-app-accent-l: #b91c1c; --pb-app-accent-d: #f87171; }
[data-pb-app="insights"] { --pb-app-accent-l: #4338ca; --pb-app-accent-d: #818cf8; }
[data-pb-app="shop"] { --pb-app-accent-l: #be185d; --pb-app-accent-d: #f472b6; }
[data-pb-app="comm"] { --pb-app-accent-l: #a21caf; --pb-app-accent-d: #e879f9; }
[data-pb-app="lms"] { --pb-app-accent-l: #8540d8; --pb-app-accent-d: #be8cff; }
[data-pb-app="pay"] { --pb-app-accent-l: #7c2d92; --pb-app-accent-d: #d59be8; }
[data-pb-app="whatsapp"] { --pb-app-accent-l: #c2410c; --pb-app-accent-d: #ff8a76; }
[data-pb-app="comply"] { --pb-app-accent-l: #be2b33; --pb-app-accent-d: #ff7077; }
[data-pb-app="gst"] { --pb-app-accent-l: #0f766e; --pb-app-accent-d: #4fd1c5; }
[data-pb-app="payroll"] { --pb-app-accent-l: #2e63dd; --pb-app-accent-d: #7ea2ff; }
[data-pb-app="ekyc"] { --pb-app-accent-l: #cf2f8a; --pb-app-accent-d: #ff77be; }
[data-pb-app="ibanking"] { --pb-app-accent-l: #b7861b; --pb-app-accent-d: #f0c75e; }
[data-pb-app="shipping"] { --pb-app-accent-l: #5f7a0a; --pb-app-accent-d: #b5d450; }
[data-pb-app="justice"] { --pb-app-accent-l: #a5328f; --pb-app-accent-d: #e58ad6; }
[data-pb-app="lending"] { --pb-app-accent-l: #b45309; --pb-app-accent-d: #f7a443; }
[data-pb-app="print"] { --pb-app-accent-l: #5c3d99; --pb-app-accent-d: #b9a0ea; }

/* resolved where the product is named, so a descendant sees its own product's value */
:root,
[data-pb-app] {
	--pb-app-accent: var(--pb-app-accent-l);
	--pb-app-accent-tint: color-mix(in srgb, var(--pb-app-accent-l) 10%, transparent);
}

[data-theme="dark"],
[data-theme="dark"] [data-pb-app],
[data-theme="dark"][data-pb-app],
[data-ps-theme="dark"],
[data-ps-theme="dark"] [data-pb-app],
[data-ps-theme="dark"][data-pb-app],
[data-pl-theme="dark"],
[data-pl-theme="dark"] [data-pb-app],
[data-pl-theme="dark"][data-pb-app] {
	--pb-app-accent: var(--pb-app-accent-d);
	--pb-app-accent-tint: color-mix(in srgb, var(--pb-app-accent-d) 14%, transparent);
}