/* Archie design tokens: one system for the client portal and the team
   dashboard. Both pages load this file first, then their own layout sheet.

   Type is Geist with Geist Mono, self hosted (the portal lives in an iframe
   inside the client's CRM, so it never reaches out to a font CDN). Geist
   Mono is for the team dashboard's numbers and ids only, never for labels.

   Colour: a light stage built from the Archie neutrals. The signal gradient
   appears once per view, on the logo mark. Status colours each come in a
   "dot" value (the brand hue) and an "ink" value (the same hue, darkened
   until it passes AA as small text on white). */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/portal-assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/portal-assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/portal-assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/portal-assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #F8F8FB;
  --surface: #FFFFFF;
  --sunken: #F2F3F7;
  --sunken-2: #EBECF2;
  --line: #E6E7EE;
  --line-2: #EFF0F5;
  --line-strong: #D5D7E1;

  /* text, from the Archie neutrals */
  --ink: #12121F;
  --ink-2: #4A4C66;
  --ink-3: #5B5D78;
  --ink-4: #7A7C97; /* placeholders and icons only, not body text */
  --ink-5: #9A9CB8; /* dots, rules, disabled */

  /* the dark neutrals, for the logo tile and the dashboard top bar */
  --dark: #0B0B14;
  --dark-2: #12121F;
  --dark-3: #161628;
  --mist: #F5F6FF;
  --mist-2: #9A9CB8;

  /* brand */
  --signal: linear-gradient(120deg, #6EA8FF, #5EEAD4);
  --accent: #6EA8FF;
  --accent-ink: #2E5CC8;
  --accent-wash: #EEF4FF;
  --aqua: #5EEAD4;
  --violet: #B18CFF;
  --violet-ink: #6B46C1;
  --violet-wash: #F4EFFF;

  /* status: dot / ink / wash */
  --ok: #0E9384;   --ok-ink: #0B7A6E;   --ok-wash: #E8F6F3;
  --run: #3B6FE0;  --run-ink: #2E5CC8;  --run-wash: #EEF4FF;
  --warn: #FBBF24; --warn-ink: #8A5A00; --warn-wash: #FEF6E2;
  --danger: #F87171; --danger-ink: #B42323; --danger-wash: #FEF0F0;

  /* type */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 26px;

  /* shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(18,18,31,0.04);
  --shadow-2: 0 1px 2px rgba(18,18,31,0.04), 0 14px 32px -18px rgba(18,18,31,0.16);
  --shadow-pop: 0 1px 2px rgba(18,18,31,0.05), 0 22px 48px -18px rgba(18,18,31,0.28);

  /* motion: one easing, short durations */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' off;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(110,168,255,0.26); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- logo mark (the one gradient on every view) ---------- */
.logo-tile {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--dark-2);
}
.wordmark { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font-size: var(--t-sm); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #26263A; }
.btn--line, .btn--secondary { background: var(--surface); border-color: var(--line-strong); }
.btn--line:hover:not(:disabled), .btn--secondary:hover:not(:disabled) { background: var(--sunken); }
.btn--ghost { color: var(--ink-3); }
.btn--ghost:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.btn.sm { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--t-sm); }
.btn.lg { height: 44px; padding: 0 20px; font-size: var(--t-base); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-3);
  font-size: var(--t-xs); font-weight: 500; white-space: nowrap; line-height: 1;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}