/* ════════════════════════════════════════════════════════════════════
   BRAND — Shater (shater)
   octo-skin.css — the backoffice shell, Kendo widgets and the EnSecurity area
   Generated by Eversity from brand.json on 2026-10-06 14:04 UTC — docs/brand-package.md
   Inputs: primary #EF582B · secondary #FFC107 · fonts Changa / Cairo / Cairo · radius rounded · sidebar dark · auth panel dark · portal dark · public dark
   Contrast gate: 12 pass · 7 adjusted · 0 fail
   Token overrides only — never edit by hand; upload a new package instead.
   ════════════════════════════════════════════════════════════════════ */

/* Fonts first: @import must precede every rule. One request per family and weight group, so a family
   Google Fonts does not have loses only itself. */
@import url("https://fonts.googleapis.com/css2?family=Changa:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Changa:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  /* ── Brand ramp ── */
  --octo-teal: #EF582B;
  --octo-teal-hover: #C83B07;
  --octo-teal-active: #9B2900;
  --octo-teal-light: #FF9A7E;
  --octo-teal-dim: #C83B07;
  --octo-teal-ghost: #FFECE7;
  --octo-teal-bg: #FFF4F1;
  /* ── Secondary / premium accent ── */
  --octo-gold: #FFC107;
  --octo-gold-hover: #C89700;
  --octo-gold-light: #FCF6EA;
  /* ── Neutrals ── */
  --octo-charcoal: #131B29;
  --octo-charcoal-deep: #060D1A;
  --octo-mid: #3A4353;
  --octo-grey: #687284;
  --octo-grey-light: #8893A5;
  --octo-rule: #CDD8EC;
  --octo-light: #E1ECFF;
  --octo-off: #F2F7FF;
  /* ── Status ── */
  --octo-success: #00674B;
  --octo-success-light: #EFFAF5;
  --octo-error: #B8110D;
  --octo-error-light: #FFF4F2;
  --octo-warning: #8D6700;
  --octo-warning-light: #FCF6EB;
  --octo-info: #0566BA;
  --octo-info-light: #F1F7FF;
  /* ── Surfaces ── */
  --octo-page-bg: #F2F7FF;
  --octo-card-bg: #FFFFFF;
  --octo-topbar-bg: #FFFFFF;
  /* ── Sidebar family (dark) ── */
  --octo-sidebar-bg: #131B29;
  --octo-sidebar-fg: rgba(255,255,255,0.72);
  --octo-sidebar-fg-strong: #FFFFFF;
  --octo-sidebar-fg-hover: #FFFFFF;
  --octo-sidebar-fg-dim: rgba(255,255,255,0.45);
  --octo-sidebar-fg-faint: rgba(255,255,255,0.30);
  --octo-sidebar-border: rgba(255,255,255,0.08);
  --octo-sidebar-hover-bg: rgba(255,255,255,0.06);
  --octo-sidebar-dot: rgba(255,255,255,0.20);
  --octo-sidebar-active-bg: rgba(239,88,43,0.16);
  --octo-sidebar-active-fg: #FF9A7E;
  --octo-sidebar-logo-fill: #FF9A7E;
  --octo-menu-bg: #252E3D;
  /* ── Auth brand panel (dark) ── */
  --octo-auth-brand-bg: #131B29;
  --octo-auth-brand-grid: rgba(255,255,255,0.015);
  --octo-auth-brand-glow: rgba(239,88,43,0.16);
  --octo-auth-brand-logo-fill: #FF9A7E;
  --octo-auth-brand-tagline: rgba(255,255,255,0.20);
  --octo-auth-brand-copy: rgba(255,255,255,0.72);
  --octo-auth-brand-footer: rgba(255,255,255,0.12);
  /* ── Public and portal shells ── */
  --octo-public-header-bg: #FFFFFF;
  --octo-public-header-border: #CDD8EC;
  --octo-public-nav-fg: #687284;
  --octo-public-nav-fg-active: #131B29;
  --octo-public-body-bg: #FFFFFF;
  --octo-public-section-bg: #F2F7FF;
  --octo-public-footer-bg: #131B29;
  --octo-public-footer-fg: rgba(255,255,255,0.72);
  --octo-public-footer-dim: rgba(255,255,255,0.45);
  --octo-public-footer-rule: rgba(255,255,255,0.10);
  --octo-portal-header-bg: #FFFFFF;
  --octo-portal-header-border: #CDD8EC;
  --octo-portal-nav-fg: #687284;
  --octo-portal-nav-fg-active: #131B29;
  --octo-portal-body-bg: #F2F7FF;
  /* ── Shadows, radii, motion ── */
  --octo-shadow-sm: 0 1px 2px rgba(6,13,26,0.06);
  --octo-shadow-md: 0 4px 12px rgba(6,13,26,0.08), 0 1px 3px rgba(6,13,26,0.05);
  --octo-shadow-lg: 0 12px 32px rgba(6,13,26,0.12), 0 2px 6px rgba(6,13,26,0.05);
  --octo-shadow-card: 0 1px 3px rgba(6,13,26,0.08), 0 1px 2px rgba(6,13,26,0.04);
  --octo-radius-sm: 6px;
  --octo-radius-md: 10px;
  --octo-radius-lg: 14px;
  --octo-radius-xl: 20px;
  --octo-ease: cubic-bezier(.16,1,.3,1);
  --octo-duration: .16s;
  /* ── Typography (the theme composes --octo-font-display/-body from these) ── */
  --octo-font-display-latin: 'Changa';
  --octo-font-body-latin: 'Cairo';
  --octo-font-arabic: 'Cairo';
  /* ── Kendo bridge ── */
  --kendo-color-primary: #EF582B;
  --kendo-color-primary-hover: #C83B07;
  --kendo-color-primary-active: #9B2900;
  --kendo-color-primary-emphasis: #FF9A7E;
  --kendo-color-primary-subtle: #FFF4F1;
  --kendo-color-primary-subtle-hover: #FFECE7;
  --kendo-color-primary-subtle-active: #FFD9CE;
  --kendo-color-primary-on-subtle: #6A1800;
  --kendo-color-primary-on-surface: #C83B07;
  --kendo-color-on-primary: #FFFFFF;
}

/* EnSecurity bridge: the area defines its own --es-* tokens inline; body .es-scope outranks them. */
body .es-scope {
  --es-accent: #EF582B;
  --es-accent-hover: #C83B07;
  --es-accent-ghost: #FFECE7;
  --es-accent-bg: #FFF4F1;
  --es-charcoal: #131B29;
  --es-mid: #3A4353;
  --es-grey: #687284;
  --es-grey-light: #8893A5;
  --es-rule: #CDD8EC;
  --es-light: #E1ECFF;
  --es-off: #F2F7FF;
  --es-page-bg: #F2F7FF;
  --es-success: #00674B;
  --es-success-bg: #EFFAF5;
  --es-error: #B8110D;
  --es-error-bg: #FFF4F2;
  --es-warning: #8D6700;
  --es-warning-bg: #FCF6EB;
  --es-r-sm: 6px;
  --es-r-md: 10px;
  --es-r-lg: 14px;
  --es-r-xl: 20px;
  --es-shadow-card: 0 1px 3px rgba(6,13,26,0.08), 0 1px 2px rgba(6,13,26,0.04);
  --es-shadow-md: 0 4px 12px rgba(6,13,26,0.08), 0 1px 3px rgba(6,13,26,0.05);
  --es-shadow-lg: 0 12px 32px rgba(6,13,26,0.12), 0 2px 6px rgba(6,13,26,0.05);
  --es-font-display: 'Changa', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --es-font-body: 'Cairo', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --es-ease: cubic-bezier(.16,1,.3,1);
}
body .es-scope .es-btn-primary:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(239,88,43,0.3); }
body .es-scope .es-btn-danger:hover:not(:disabled) { background: #B8110D; }

/* ── BRAND LOGO — this brand ships a full lockup, wider than the square these slots assume ── */
.octo-sidebar-logo > img { width: auto; height: 38px; max-width: 170px; }
.octo-sidebar.collapsed .octo-sidebar-logo > img { width: auto; height: 26px; max-width: 48px; margin: 16px 0 6px 0; }
.auth-brand-logo img { width: auto; height: 65px; max-width: 240px; }