/* AnesOps — shared brand tokens (colors and fonts match AnesVault).
   Change a color here and it updates on the marketing page and the demo app. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --navy: #0D2B3E;
  --navy-2: #1A4A5C;
  --teal: #1A6B7C;
  --teal-light: #2A8B9F;
  --gold: #C8963E;
  --gold-light: #E8B45A;
  --gold-text: #8A6416;      /* gold that is dark enough for text on white */
  --mist: #F0F5F7;           /* page background */
  --ice: #E8F4F7;            /* soft teal fill */
  --slate: #4A6572;          /* secondary text */
  --slate-light: #8AA5B0;
  --line: #D0E2E8;           /* borders */
  --white: #FFFFFF;
  --danger: #B0362A;
  --good: #2D7D5A;

  --grad-hero: linear-gradient(160deg, var(--navy) 0%, var(--teal) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold), var(--gold-light));
  --grad-teal: linear-gradient(135deg, var(--teal), var(--teal-light));

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(13, 43, 62, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--mist); color: var(--navy); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--grad-gold); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand-name { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 100px; border: 1.5px solid transparent; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-gold { background: var(--grad-gold); color: var(--navy); }
.btn-gold:hover { color: var(--navy); filter: brightness(1.05); }
.btn-teal { background: var(--grad-teal); color: var(--white); }
.btn-teal:hover { color: var(--white); filter: brightness(1.08); }
.btn-outline { background: var(--white); color: var(--navy); border-color: var(--teal); }
.btn-ghost-light { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-ghost-light:hover { color: var(--white); background: rgba(255,255,255,0.14); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }

.eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.serif { font-family: var(--serif); font-weight: 400; }
.muted { color: var(--slate); }