@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* Tesseract — Frappe Desk skin.
   Light ground, ink type, hairline separation, everything square.
   Frappe's Desk is driven almost entirely by CSS custom properties, so the
   brand is applied at the token layer rather than by restyling components
   one by one. Component rules below are only for what tokens cannot reach. */

:root,
:root[data-theme="light"],
[data-theme="light"] {
  /* Tesseract light theme */
  --fw-ground: #F3F2F0;
  --fw-surface: #FFFFFF;
  --fw-ink: #16151B;
  --fw-ink-2: #55525E;
  --fw-ink-3: #8B8893;
  --fw-rule: rgba(22, 21, 27, .11);
  --fw-rule-2: rgba(22, 21, 27, .2);
  --fw-violet: #7800FF;
  --fw-green: #00744D;
  --fw-live: #E5342B;

  /* ── Frappe surfaces ─────────────────────────────────────────────────── */
  --bg-color: var(--fw-ground);
  --fg-color: var(--fw-surface);
  --card-bg: var(--fw-surface);
  --control-bg: var(--fw-surface);
  --control-bg-on-gray: var(--fw-ground);
  --subtle-fg: var(--fw-ground);
  --subtle-accent: var(--fw-ground);
  --fg-hover-color: var(--fw-ground);
  --navbar-bg: var(--fw-surface);
  --awesomplete-hover-bg: var(--fw-ground);
  --modal-bg: var(--fw-surface);
  --disabled-control-bg: var(--fw-ground);
  --sidebar-select-color: var(--fw-ground);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --text-color: var(--fw-ink);
  --heading-color: var(--fw-ink);
  --text-muted: var(--fw-ink-3);
  --text-light: var(--fw-ink-3);
  --disabled-text-color: var(--fw-ink-3);
  --invert-neutral: var(--fw-surface);
  --font-stack: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Rules, not shadows ──────────────────────────────────────────────── */
  --border-color: var(--fw-rule);
  --dark-border-color: var(--fw-rule-2);
  --gray-200: var(--fw-rule);
  --gray-300: var(--fw-rule-2);

  --shadow-base: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --card-shadow: none;
  --modal-shadow: none;
  --btn-shadow: none;

  /* ── Brand ───────────────────────────────────────────────────────────── */
  --primary: var(--fw-violet);
  --primary-color: var(--fw-violet);
  --brand-color: var(--fw-violet);
  --text-on-primary: #fff;
  --icon-stroke: var(--fw-ink-2);
  --icon-fill-bg: transparent;

  /* Primary action is ink — violet is where you're going, ink is what you do. */
  --btn-primary: var(--fw-ink);
  --btn-primary-text: var(--fw-surface);

  /* Every radius step is pinned to 0. Enforcement, not oversight. */
  --border-radius: 0;
  --border-radius-xs: 0;
  --border-radius-sm: 0;
  --border-radius-md: 0;
  --border-radius-lg: 0;
  --border-radius-xl: 0;
  --border-radius-full: 0;
}

body,
.layout-main,
.desk-sidebar,
.page-container {
  font-family: var(--font-stack);
  -webkit-font-smoothing: antialiased;
}

/* Square everything. Radix/Frappe components that hardcode a radius. */
.btn, .card, .form-control, .input-with-feedback, .modal-content, .dropdown-menu,
.awesomplete > ul, .widget, .list-row-container, .page-head, .sidebar-item-container,
.frappe-control input, .frappe-control select, .frappe-control textarea,
.datepicker, .indicator-pill, .filter-selector .btn, .comment-box {
  border-radius: 0 !important;
}
/* The two permitted curves: full circles and the one pill. */
.avatar, .avatar-frame, .indicator-pill.round { border-radius: 999px !important; }

/* Hairlines instead of shadows. */
.widget, .card, .page-head, .form-section, .modal-content, .dropdown-menu {
  box-shadow: none !important;
  border: 1px solid var(--fw-rule);
}

.navbar {
  background: var(--fw-surface) !important;
  border-bottom: 1px solid var(--fw-rule);
  box-shadow: none !important;
}

/* Sidebar — the rail. */
.desk-sidebar .sidebar-item-container .desk-sidebar-item {
  border-radius: 0 !important;
  font-weight: 500;
}
.desk-sidebar .selected {
  background: var(--fw-ground) !important;
  box-shadow: inset 2px 0 0 var(--fw-violet);
  font-weight: 700;
}

/* Section labels speak in the micro voice. */
.sidebar-label, .widget-head .widget-title, .form-section .section-head,
.list-subject .level-item.text-muted {
  letter-spacing: .06em;
}

/* Buttons */
.btn-primary {
  background: var(--fw-ink) !important;
  border-color: var(--fw-ink) !important;
  color: var(--fw-surface) !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus { opacity: .88; }
.btn-default, .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--fw-rule-2) !important;
  color: var(--fw-ink) !important;
  font-weight: 600;
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--fw-violet) !important; }

/* Links and focus are violet. Never remove the ring. */
a, .link-btn, .sidebar-item-label a { color: var(--fw-violet); }
:focus-visible { outline: 2px solid var(--fw-violet) !important; outline-offset: 2px; }
.form-control:focus, input:focus {
  border-color: var(--fw-violet) !important;
  box-shadow: 0 0 0 3px rgba(120, 0, 255, .08) !important;
}

/* Lists — hairline rows, uppercase micro headers. */
.list-row-head, .report-wrapper .dt-header {
  background: var(--fw-ground) !important;
  border-bottom: 1px solid var(--fw-rule-2) !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 600;
  color: var(--fw-ink-3) !important;
}
.list-row-container { border-bottom: 1px solid var(--fw-rule); }
.list-row-container:hover { background: var(--fw-ground) !important; }

/* Red is a camera tally, not an error colour — errors speak in violet. */
.indicator-pill.red, .indicator-pill.danger,
.msgprint .text-danger, .alert-danger, .has-error .form-control {
  color: var(--fw-violet) !important;
  border-color: var(--fw-violet) !important;
  background: rgba(120, 0, 255, .08) !important;
}
/* Green is a tally light — reserve it, do not use it as a success colour. */
.indicator-pill.green { background: rgba(0, 116, 77, .1) !important; color: var(--fw-green) !important; }

::selection { background: var(--fw-violet); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}