/* Digit UI tokens.
   Source: ERPNext System 2026 (6) / 06-Product-Blueprint.
   Keep this file framework-safe: variables, fonts, and generic foundations only. */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/Archivo-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/Archivo-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/Archivo-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/Archivo-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/Archivo-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/IBMPlexSansArabic-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/IBMPlexSansArabic-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/digit/fonts/digit/IBMPlexSansArabic-Bold.ttf") format("truetype");
}

:root {
	--digit-brand: #0A8754;
	--digit-brand-deep: #064E3B;
	--digit-brand-soft: #E6F3EC;
	--digit-mint: #34D399;
	--digit-ink: #0B1F17;
	--digit-body: #33433B;
	--digit-muted: #71807A;
	--digit-paper: #F4F3EE;
	--digit-card: #FFFFFF;
	--digit-border: rgba(6, 78, 59, 0.14);
	--digit-border-soft: rgba(6, 78, 59, 0.08);
	--digit-success: #067647;
	--digit-success-bg: #ECFDF3;
	--digit-warning: #B54708;
	--digit-warning-bg: #FFFAEB;
	--digit-error: #B42318;
	--digit-error-bg: #FEF3F2;
	--digit-info: #175CD3;
	--digit-info-bg: #EFF8FF;
	--digit-radius-xs: 4px;
	--digit-radius-sm: 6px;
	--digit-radius-md: 8px;
	--digit-radius-lg: 10px;
	--digit-shadow-flat: 0 1px 0 rgba(6, 78, 59, 0.05), 0 1px 2px rgba(6, 78, 59, 0.06);
	--digit-shadow-hover: 0 4px 14px rgba(6, 78, 59, 0.12);
	--digit-focus: 0 0 0 3px rgba(52, 211, 153, 0.24);
	--digit-font-arabic: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
	--digit-font-latin: "Archivo", Arial, sans-serif;
	/* TODO: add local Space Mono files if strict blueprint parity is required. */
	--digit-font-mono: "Courier New", Consolas, monospace;
	--digit-topbar-height: 55px;
	--digit-sidebar-width: 248px;
	--digit-content-pad-x: 24px;
	--digit-content-pad-y: 20px;
	--digit-control-height: 34px;
	--digit-button-height: 33px;
	--digit-base-font-size: 13px;
	/* Dark identity chrome — navbar + sidebar share one deep-green frame
	   (DIGIT_PRODUCT_IDENTITY_REFERENCE nav rules + strong brand presence). */
	--digit-chrome-bg: #06402F;
	--digit-chrome-bg-2: #064E3B;
	--digit-chrome-grad: linear-gradient(180deg, #064E3B 0%, #06402F 100%);
	--digit-sidebar-bg: #064E3B;
	--digit-sidebar-fg: rgba(244, 243, 238, 0.78);
	--digit-sidebar-fg-strong: #FFFFFF;
	--digit-sidebar-hover-bg: rgba(52, 211, 153, 0.12);
	--digit-sidebar-active-bg: rgba(52, 211, 153, 0.18);
	--digit-sidebar-active-bar: var(--digit-mint);
	--digit-sidebar-label: rgba(52, 211, 153, 0.75);
	--digit-sidebar-accent: var(--digit-mint);
	/* Brand gradients / accents */
	--digit-brand-grad: linear-gradient(135deg, #064E3B 0%, #0A8754 100%);
	--digit-icon-grad: linear-gradient(135deg, #0A8754 0%, #34D399 100%);
	--digit-mint-soft: rgba(52, 211, 153, 0.14);
	--digit-emerald-soft: rgba(10, 135, 84, 0.08);
	/* Secondary surface (subtle zebra / column-header fill) — mirrors SPA --d-surface-2. */
	--digit-surface-2: #F1F5F2;
	/* APPROVED-GREEN table tokens (user request 2026-07-05) — table headers now
	   carry the brand green instead of neutral grey, across every embedded-desk
	   table (list view, report datatable, child grids). Status pills stay neutral
	   (they use --digit-surface-2, untouched). Light tint keeps dark text readable. */
	--digit-table-header: #e6f3ec;
	--digit-table-hover: rgba(10, 135, 84, 0.07);
	--digit-shadow-brand: 0 10px 28px rgba(6, 78, 59, 0.16);
}

/* Frappe variable bridge: map ERPNext's own theme variables to Digit tokens.
   This themes Desk by overriding source variables rather than fighting every
   selector with !important. Loads first, so all later Digit files inherit it. */
:root {
	--bg-color: var(--digit-paper);
	/* Frappe semantics: --fg-color is the elevated SURFACE color (cards,
	   sections, modals), not text. Must stay light or surfaces go dark. */
	--fg-color: var(--digit-card);
	--card-bg: var(--digit-card);
	--text-color: var(--digit-ink);
	--heading-color: var(--digit-ink);
	--text-muted: var(--digit-muted);
	/* --subtle-fg NOT remapped: Frappe uses it as a light SURFACE (e.g. .list-row-head
	   background = var(--subtle-fg)); the muted mid-tone was darkening the table header.
	   Keep Frappe's official default (--gray-100) so list/table headers stay light. */
	--muted-text-color: var(--digit-muted);
	--control-bg: var(--digit-card);
	/* --control-bg-on-gray NOT remapped: keep Frappe default (--gray-200) so the list-header
	   quick-filter fields show a visible gray fill instead of blending into the white page. */
	/* --border-color / --dark-border-color NOT remapped: keep Frappe's official borders
	   so filter pills / inputs / headers show proper edges (the green tint looked borderless). */
	--primary: var(--digit-brand);
	--primary-color: var(--digit-brand);
	--btn-primary: var(--digit-brand);
	--btn-default-bg: var(--digit-card);
	--btn-default-hover-bg: var(--digit-brand-soft);
	--sidebar-select-color: var(--digit-sidebar-active-bg);
	--text-on-primary: #FFFFFF;
}

html,
body {
	letter-spacing: 0 !important;
}

body {
	background: var(--digit-paper) !important;
	color: var(--digit-body) !important;
	font-family: var(--digit-font-arabic) !important;
	font-size: var(--digit-base-font-size);
	line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   DARK MODE (embedded desk only). The Digit shell mirrors its light/dark theme
   into the iframe by stamping html[data-theme="dark"] (digit_desk.js). Frappe's
   own [data-theme="dark"] block already darkens its CSS vars, but the light
   bridge above (mapped on :root) and the body { ...!important } rule would
   otherwise force the surface back to light. Re-map the bridge to a Digit dark
   palette here — reusing frontend/src/index.css dark tokens (paper #0c100e,
   surface #161b18, ink #eef3f1) — so surfaces, text and borders are dark,
   legible and visually consistent with the shell. Scoped to embed + dark, so
   standalone desk and light mode are untouched.
   ---------------------------------------------------------------------------- */
html.digit-embedded[data-theme="dark"] {
	--digit-paper: #0c100e;
	--digit-card: #161b18;
	--digit-ink: #eef3f1;
	--digit-body: #c0cbc4;
	--digit-muted: #869389;
	--digit-border: rgba(255, 255, 255, 0.12);
	--digit-border-soft: rgba(255, 255, 255, 0.07);
	--digit-brand: #0A8754;
	--digit-brand-soft: rgba(10, 135, 84, 0.22);
	--digit-mint: #34d399;
	--digit-shadow-flat: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
	--digit-shadow-hover: 0 12px 32px -16px rgba(0, 0, 0, 0.65);
	--digit-surface-2: rgba(255, 255, 255, 0.04);
	/* APPROVED-GREEN table tokens — dark variants: subtle emerald film so headers
	   read green (not neutral white) while staying legible on the dark card. */
	--digit-table-header: rgba(10, 135, 84, 0.20);
	--digit-table-hover: rgba(10, 135, 84, 0.13);

	/* Re-point the Frappe variable bridge at the dark surfaces. */
	--bg-color: var(--digit-paper);
	--fg-color: var(--digit-card);
	--card-bg: var(--digit-card);
	--text-color: var(--digit-ink);
	--heading-color: var(--digit-ink);
	--text-muted: var(--digit-muted);
	--subtle-fg: var(--digit-muted);
	--muted-text-color: var(--digit-muted);
	--control-bg: #1d2421;
	--control-bg-on-gray: #1d2421;
	--border-color: var(--digit-border);
	--dark-border-color: var(--digit-border);
	--btn-default-bg: #1d2421;
	--btn-default-hover-bg: var(--digit-brand-soft);
	color-scheme: dark;
}

html.digit-embedded[data-theme="dark"] body {
	background: var(--digit-paper) !important;
	color: var(--digit-body) !important;
}

.en,
.sub-en,
.kbd,
kbd,
.num,
.currency,
[data-fieldtype="Currency"] .control-value,
[data-fieldtype="Float"] .control-value,
[data-fieldtype="Int"] .control-value {
	font-family: var(--digit-font-latin) !important;
	letter-spacing: 0 !important;
}

code,
pre,
.monospace,
.command-key,
.awesomplete .text-muted {
	font-family: var(--digit-font-mono) !important;
}

/* List-header quick-filter fields: Frappe renders them border-less (.form-control
   { border: none }), so with our light theme they read as one flat white band. Give each
   field a clear border harmonised with the theme so it stands out as a defined pill. */
/* Brand-green two-tone (logo identity): the light page is the unified background; the
   filter fields + the list header share one distinctive brand green so they read as one
   harmonious accent family — the header sits a touch deeper than the fields for hierarchy. */
.standard-filter-section .form-control,
.filter-section .form-control {
	background-color: var(--digit-brand-soft) !important;   /* #E6F3EC — soft brand green */
	border: 1px solid rgba(10, 135, 84, 0.22) !important;   /* subtle green edge */
	border-radius: var(--digit-radius-sm);
}
.list-row-head {
	background-color: rgba(10, 135, 84, 0.15) !important;   /* deeper brand green — distinguished header */
}