/* cpi_branding v0.1.1 */
/* ==========================================================================
   CPI desk theme — Custom Profiles Inc.
   ==========================================================================
   PURPOSE
     Tune stock ERPNext v16 (espresso design system) to CPI's brand.
     "ERPNext, professionally tuned to CPI" — not a reskin.

   DISCIPLINE (the approval is conditional on these — see GOAL_BRANDING.md)
     - CSS only. No JS, no template overrides, no core string renames.
     - Override Frappe CSS custom properties wherever one exists.
     - Element/class selectors ONLY where no variable exists; each such rule
       is marked "NO-VARIABLE EXCEPTION" with the reason. There are 4.
     - Status/indicator/danger semantics are Frappe's — left stock.

   TOKENS
     cobalt        #0047BA  primary action (buttons, checks, focus, accents)
     cobalt-hover  #003A99  primary button hover (light)
     dark-cobalt   #6E9BE4  primary action on dark grounds
     dk-cob-hover  #82ABEB  primary button hover (dark)
     ink           #2C3A47  headings (light)
     charcoal      #212322  body text (light)
     paper         #FBFBFA  page background (light)
     mist          #F4F6F8  subtle accent surfaces (light)
     Fonts: IBM Plex Sans (body, variable wght 100-700, latin subset)
            Archivo (headings, variable wght 100-900, latin subset)

   WCAG AA CONTRAST (computed, WCAG 2.x relative-luminance formula)
     #FFFFFF on #0047BA = 8.04:1   (primary btn text, light)
     #0047BA on #FBFBFA = 7.77:1   (cobalt accents on paper)
     #212322 on #FBFBFA = 15.27:1  (body text, light)
     #2C3A47 on #FBFBFA = 11.25:1  (headings, light)
     #000000 on #6E9BE4 = 7.47:1   (primary btn text, dark: --neutral=black)
     #6E9BE4 on #171717 = 6.38:1   (cobalt accents on dark bg)
     All pairs clear AA (4.5:1); most clear AAA (7:1).

   SOURCE OF TRUTH for variable names: frappe v16
     frappe/public/scss/espresso/_colors.scss, _typography.scss, _shadows.scss
     frappe/public/scss/common/css_variables.scss, desk/dark.scss, desk/sidebar.scss
   ========================================================================== */

/* --- Self-hosted fonts (no external requests; files live in this app) ----- */
/* Both fonts are SIL OFL 1.1 — license copies in ../fonts/                   */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 100 700; /* variable font */
	font-display: swap;
	src: url("../fonts/IBMPlexSans-Var.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/IBMPlexSans-Italic-Var.woff2") format("woff2");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900; /* variable font */
	font-display: swap;
	src: url("../fonts/Archivo-Var.woff2") format("woff2");
}

/* --- Light theme (and base) ---------------------------------------------- */
/* :root:root doubles specificity (0,2,0) so these overrides win regardless
   of stylesheet order. Needed because the login page loads login.bundle.css
   AFTER web_include_css, and that bundle re-declares the same :root variables.
   RULE THIS IMPLIES: every variable set here MUST also be set in the dark
   block below, otherwise this block would outrank Frappe's own (0,1,0)
   [data-theme="dark"] values and break dark mode. Keep the two in sync.     */

:root:root {
	/* typography — body stays IBM Plex Sans; Inter kept as fallback */
	--font-stack: "IBM Plex Sans", "InterVariable", "Inter", -apple-system,
		"BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

	/* primary action: cobalt.
	   --primary drives checkbox checked bg + gradient, progress bar,
	   --brand-color, and bootstrap's .text-primary/.btn-outline-primary.
	   --btn-primary is the primary button bg (text is --neutral = white).
	   --primary-color drives theme-switcher selection + notification accents. */
	--primary: #0047ba;
	--primary-color: #0047ba;
	--btn-primary: #0047ba;
	--cpi-primary-hover: #003a99; /* our own token, consumed below */

	/* focus rings (inputs, checkbox via --checkbox-focus-shadow, switch) */
	--focus-default: 0px 0px 0px 2px rgba(0, 71, 186, 0.3);

	/* neutrals: ink headings, charcoal body, paper/mist surfaces */
	--heading-color: #2c3a47;
	--text-color: #212322;
	--bg-color: #fbfbfa;
	--subtle-accent: #f4f6f8;

	/* desk sidebar active item: soft cobalt tint instead of white pill */
	--sidebar-active-color: #e9f0fb;
}

/* --- Dark theme ----------------------------------------------------------- */
/* Mirrors EVERY variable from the light block (see rule above).
   Dark cobalt #6E9BE4 is a lighter tint so contrast holds on dark grounds:
   btn text in dark is --neutral = black (7.47:1 on #6E9BE4). Values marked
   "restore" repeat Frappe's stock dark value verbatim.                      */

:root:root[data-theme="dark"] {
	--font-stack: "IBM Plex Sans", "InterVariable", "Inter", -apple-system,
		"BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

	--primary: #6e9be4;
	--primary-color: #6e9be4;
	--btn-primary: #6e9be4;
	--cpi-primary-hover: #82abeb;

	--focus-default: 0px 0px 0px 2px rgba(110, 155, 228, 0.45);

	--heading-color: var(--gray-50); /* restore stock dark */
	--text-color: var(--gray-50); /* restore stock dark */
	--bg-color: var(--gray-900); /* restore stock dark */
	--subtle-accent: var(--gray-800); /* restore stock dark */

	--sidebar-active-color: #263449; /* cobalt-tinted counterpart */

	/* stock dark checkboxes fill neutral-white; brand them dark-cobalt.
	   (light needs no override — its gradient is built from --primary.)
	   The dark check icon is black-stroked: 7.47:1 on #6E9BE4.             */
	--checkbox-gradient: linear-gradient(180deg, #6e9be4 -124.51%, #6e9be4 100%);
}

/* --- NO-VARIABLE EXCEPTIONS (element/class selectors, kept shallow) ------- */

/* 1. Headings in Archivo. There is no separate heading font variable in
      espresso — h1-h6 and page titles simply inherit --font-stack.          */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title .title-text {
	font-family: "Archivo", var(--font-stack);
}

/* 2. Primary button hover. Frappe defines no hover variable for .btn-primary
      (its bg is a flat var(--btn-primary); :active is handled by Frappe with
      --invert-neutral and is left alone).                                   */
.btn.btn-primary:hover {
	background-color: var(--cpi-primary-hover);
}

/* 3. Switch (toggle) on-state. element/checkbox.scss hardcodes
      var(--invert-neutral) for input:checked + .slider — no variable.       */
input:checked + .slider {
	background-color: var(--primary);
}

/* 4. Login card logo sizing. The login page's .app-logo has no size
      variable; cap it so large uploaded logos don't dominate the card.      */
.page-card-head .app-logo {
	max-height: 48px;
	width: auto;
}

/* NO-VARIABLE EXCEPTION 5: the login page button. login.bundle.css styles
   .btn-login with a hardcoded near-black background (not routed through
   --btn-primary) and loads after this sheet - hence the !important. Scoped
   to the login page wrapper so it cannot leak into the desk. */
.for-login .btn-login,
.for-login .btn-login:focus {
    background-color: var(--btn-primary, #0047BA) !important;
    border-color: var(--btn-primary, #0047BA) !important;
    color: #ffffff !important;
}
.for-login .btn-login:hover {
    background-color: #003A99 !important;
    border-color: #003A99 !important;
}