/* Two themes on one structure. Dark ("Obsidian") is the default: graphite planes
   lit softly by the workspace accent. Light is the same three planes in white.
   Components read only these tokens; the theme is chosen per device
   (html[data-theme], set by src/theme-init.js before first paint). */
:root {
  --font-ui:
    'Geist', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --text-caption: 11.5px;
  --text-meta: 12.5px;
  --text-body: 14px;
  --text-title: 16px;
  --text-page: 32px;
  --radius-control: 9px;
  --radius-surface: 16px;
  --radius-sheet: 18px;
  --row-height: 48px;
  --control-height: 36px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --accent: #71429d;
  --system-secondary: #9d568e;
  --ambient-start: #ffdfca;
  --ambient-middle: #e5d3f5;
  --ambient-end: #f6c9dc;
  --invoice-accent: #8d7142;
  --invoice-border: #b3955d;
  --invoice-tint: #f5f1e8;
  --invoice-ink: #414244;
  --invoice-muted: #626365;
  --invoice-line: #d8d6d1;

  /* Dark */
  color-scheme: dark;
  --frame: #08090c;
  --sheet: #0e1014;
  --surface: #14161b;
  --surface-2: #1a1d23;
  --surface-3: #22262d;
  --well: #0b0d10;
  --ink: #eef0f4;
  --ink-soft: #b5bac5;
  --muted: #7f8594;
  --heading: #ffffff;
  --placeholder: #7a8091;
  --line: #ffffff12;
  --line-strong: #ffffff1f;
  --line-hover: #ffffff33;
  --tint-1: #ffffff05;
  --tint-2: #ffffff0a;
  --tint-3: #ffffff0f;
  --tint-4: #ffffff14;
  --tint-5: #ffffff1f;
  --tint-6: #ffffff2e;
  --accent-ink: color-mix(in srgb, var(--accent) 56%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 17%, transparent);
  --accent-selected: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 90%, white),
    var(--accent)
  );
  --sheet-light: color-mix(in srgb, var(--accent) 21%, transparent);
  --sheet-light-far: color-mix(in srgb, var(--accent) 8%, transparent);
  --spot: color-mix(in srgb, var(--accent) 9%, transparent);
  --card-fill: linear-gradient(180deg, #17191f, #131519);
  --card-edge:
    inset 0 1px 0 #ffffff0b, 0 0 0 1px #ffffff0f, 0 10px 30px #0000004d;
  --card-edge-hover:
    inset 0 1px 0 #ffffff12, 0 0 0 1px #ffffff1c, 0 14px 36px #00000066;
  --btn-bg: #ffffff0b;
  --btn-bg-hover: #ffffff14;
  --btn-shadow: inset 0 1px 0 #ffffff0d;
  --primary-shadow:
    inset 0 1px 0 #ffffff26,
    0 0 0 1px color-mix(in srgb, var(--accent) 75%, black), 0 1px 2px #00000059;
  --primary-shadow-hover:
    inset 0 1px 0 #ffffff33,
    0 0 0 1px color-mix(in srgb, var(--accent) 75%, black), 0 2px 6px #00000066;
  --well-shadow: inset 0 1px 2px #00000059;
  --popover-bg: #181a20;
  --dialog-fill: linear-gradient(180deg, #181a20, #121419);
  --drawer-bar: #121419d9;
  --drawer-bar-solid: #131519;
  --backdrop: #000000a8;
  --toast-bg: #1c1f26;
  --toast-ink: #eef0f4;
  --toast-error-bg: #2a1418;
  --toast-error-ink: #ffd7db;
  --nav-ink: #aab0bc;
  --nav-icon: #6c7281;
  --nav-label: #7f8594;
  --nav-hover: #ffffff07;
  --indicator-fill: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    #ffffff07 70%
  );
  --indicator-fill-rtl: linear-gradient(
    270deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    #ffffff07 70%
  );
  --indicator-edge: inset 0 0 0 1px #ffffff12, inset 0 1px 0 #ffffff12;
  --lane-fill: #ffffff05;
  --ring-hole: #121418;
  --contrast-mix: white;
  --startup-shadow: #000000b3;
  --sheet-edge: inset 0 1px 0 #ffffff0d, 0 0 0 1px #ffffff0d;
  --scrollbar: #ffffff26;
  --selection-bg: color-mix(in srgb, var(--accent) 50%, transparent);
  --selection-ink: #ffffff;
  --focus-halo: color-mix(in srgb, var(--accent) 36%, transparent);
  --success: #3ccf8e;
  --success-soft: #3ccf8e1f;
  --success-ring: #3ccf8e2e;
  --warning: #f2b94b;
  --warning-soft: #f2b94b1f;
  --warning-ring: #f2b94b2e;
  --danger: #ff6b78;
  --danger-soft: #ff6b781f;
  --danger-ring: #ff6b782e;
  --shadow-soft: 0 1px 2px #00000066;
  --shadow-hover: 0 8px 24px #00000080;
  --shadow-popover: 0 0 0 1px #ffffff17, 0 24px 64px #000000b3;
  --shadow: 0 0 0 1px #ffffff17, 0 32px 90px #000000c7;

  --canvas: var(--frame);
  --sidebar: var(--frame);
  --accent-dark: var(--accent-ink);
  --accent-hover: var(--tint-2);
  --accent-sheen: linear-gradient(transparent, transparent);
  --system-secondary-soft: color-mix(
    in srgb,
    var(--system-secondary) 18%,
    transparent
  );
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Light: white sheet on a soft grey frame; depth from fine shadows. */
:root[data-theme='light'] {
  color-scheme: light;
  --frame: #f1f2f5;
  --sheet: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eff1f4;
  --well: #ffffff;
  --ink: #101217;
  --ink-soft: #3f4550;
  --muted: #636a7a;
  --heading: #0b0d11;
  --placeholder: #6b7280;
  --line: #10121714;
  --line-strong: #10121722;
  --line-hover: #1012173d;
  --tint-1: #10121704;
  --tint-2: #10121708;
  --tint-3: #1012170c;
  --tint-4: #10121711;
  --tint-5: #10121718;
  --tint-6: #10121726;
  --accent-ink: color-mix(in srgb, var(--accent) 88%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-selected: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 92%, white),
    var(--accent)
  );
  --sheet-light: color-mix(in srgb, var(--accent) 8%, transparent);
  --sheet-light-far: color-mix(in srgb, var(--accent) 4%, transparent);
  --spot: color-mix(in srgb, var(--accent) 6%, transparent);
  --card-fill: #ffffff;
  --card-edge: 0 0 0 1px #10121712, 0 1px 2px #1012170a, 0 6px 20px #10121708;
  --card-edge-hover:
    0 0 0 1px #1012171f, 0 2px 4px #1012170f, 0 12px 30px #1012170f;
  --btn-bg: #ffffff;
  --btn-bg-hover: #f6f7f9;
  --btn-shadow: 0 1px 2px #1012170f;
  --primary-shadow:
    inset 0 1px 0 #ffffff33,
    0 0 0 1px color-mix(in srgb, var(--accent) 85%, black), 0 1px 2px #10121726;
  --primary-shadow-hover:
    inset 0 1px 0 #ffffff40,
    0 0 0 1px color-mix(in srgb, var(--accent) 85%, black), 0 2px 6px #1012172e;
  --well-shadow: inset 0 1px 1px #1012170a;
  --popover-bg: #ffffff;
  --dialog-fill: #ffffff;
  --drawer-bar: #ffffffd9;
  --drawer-bar-solid: #ffffff;
  --backdrop: #0b0d1147;
  --toast-bg: #14161b;
  --toast-ink: #f3f4f6;
  --toast-error-bg: #fff1f2;
  --toast-error-ink: #9f1d2b;
  --nav-ink: #464c57;
  --nav-icon: #8b919c;
  --nav-label: #636a7a;
  --nav-hover: #1012170a;
  --indicator-fill: #ffffff;
  --indicator-fill-rtl: #ffffff;
  --indicator-edge: 0 0 0 1px #10121712, 0 1px 3px #10121714;
  --lane-fill: #10121704;
  --ring-hole: #fbfbfc;
  --contrast-mix: black;
  --startup-shadow: color-mix(in srgb, var(--accent) 40%, transparent);
  --sheet-edge: 0 0 0 1px #10121710, 0 1px 3px #1012170a;
  --scrollbar: #10121733;
  --selection-bg: color-mix(in srgb, var(--accent) 20%, transparent);
  --selection-ink: #101217;
  --focus-halo: color-mix(in srgb, var(--accent) 22%, transparent);
  --success: #18794e;
  --success-soft: #18794e14;
  --success-ring: #18794e33;
  --warning: #935f00;
  --warning-soft: #f2b94b29;
  --warning-ring: #935f0033;
  --danger: #c22f3e;
  --danger-soft: #c22f3e12;
  --danger-ring: #c22f3e2e;
  --shadow-soft: 0 1px 2px #1012170f;
  --shadow-hover: 0 6px 18px #10121714;
  --shadow-popover: 0 0 0 1px #10121714, 0 16px 48px #1012171f;
  --shadow: 0 0 0 1px #10121714, 0 30px 80px #10121733;
  -webkit-font-smoothing: auto;
}

/* Cursive scripts must never be letter-spaced: it breaks the joins. */
html[dir='rtl'] :not(.invoice-print, .invoice-print *) {
  letter-spacing: 0 !important;
}

* {
  box-sizing: border-box;
}
html {
  background: var(--frame);
}
/* Space for the scrollbar is always kept on screen, so nothing shifts when it
   appears. Print keeps its own full-width layout. */
@media screen {
  html {
    scrollbar-gutter: stable;
  }
}
body {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.5;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--frame);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  color: inherit;
}
.hidden {
  display: none !important;
}
.icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}