/* EasyStudio brand tokens (from easystudio.co.za) and the base styles shared by
   the contract (index.html), pricing and jobs tools. Page-specific styles stay in each page. */
:root {
  color-scheme: dark;
  --black: #000; --surface: #040405; --desk: #0d0e0f; --line: #2e2f31; --field-edge: #5d5e60; /* 3:1 on black */
  --ink: #f5f3ee; --muted: #909193; --accent: #002cea; --accent-hover: #0024c2; --done: #4ade80;
  --warn: #fde68a; --late: #ff8f85; --paper: #fff;
  --ui: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { margin: 0; font: 14px/1.5 var(--ui); background: var(--black); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
/* ink, not accent, for focus: #002cea on black is only 2.5:1 */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }
/* hide number spinners: they crowd the fields and the arrows add nothing here */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* pill buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border: 1px solid var(--field-edge); border-radius: 100px; background: none; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--field-edge); }

/* segmented switch: radio buttons styled as pills (pricing modes, stack views) */
.seg { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--field-edge); border-radius: 100px; }
.seg label { position: relative; display: flex; flex: 1; margin: 0; }
.seg input { position: absolute; opacity: 0; }
.seg span { flex: 1; padding: 6px 0; border-radius: 100px; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--accent); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }