/* ============================================================
   ScopeTrail — shared foundation
   Design tokens + primitives used by the client dashboard.
   Mirrors the visual identity of the interactive demo at "/".
   No gradients, no glassmorphism, restrained borders + shadows.
   ============================================================ */

:root{
  /* ScopeTrail design tokens (shared with the landing page + demo) */
  --ivory:#f9f6ef;
  --ivory-deep:#f1ebdd;
  --paper:#fffdf8;
  --charcoal:#1c1a17;
  --charcoal-soft:#4a463f;
  --charcoal-mute:#78716a;
  --line:rgba(28,26,23,0.1);
  --line-soft:rgba(28,26,23,0.06);
  --coral:#d9542f;
  --coral-deep:#b8431f;
  --coral-tint:#f7ddce;
  --coral-tint-soft:#fbeee5;

  --font-display:"Newsreader",Georgia,serif;
  --font-body:"Inter",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Semantic aliases */
  --bg:var(--ivory);
  --surface:var(--paper);
  --surface-2:var(--ivory-deep);
  --ink:var(--charcoal);
  --ink-soft:var(--charcoal-soft);
  --ink-faint:var(--charcoal-mute);
  --border:var(--line);
  --border-strong:rgba(28,26,23,0.16);

  --accent:var(--coral);
  --accent-strong:var(--coral-deep);
  --accent-tint:var(--coral-tint);
  --accent-ink:var(--coral-deep);

  /* Amber — reserved for attention / missed-call states */
  --warn:#c6881b;
  --warn-ink:#8a5a05;
  --warn-tint:#faf0da;

  /* Positive moments read in coral, never green */
  --good:var(--coral);
  --good-ink:var(--coral-deep);
  --good-tint:var(--coral-tint-soft);

  --btn-bg:var(--charcoal);
  --btn-ink:var(--paper);

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --shadow-sm:0 1px 2px rgba(28,26,23,.04),0 12px 32px -20px rgba(28,26,23,.25);
  --shadow-md:0 20px 60px -30px rgba(28,26,23,.35);
  --ring:0 0 0 3px var(--coral-tint);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* Warm charcoal counterpart — mirrors the landing page's dark sections. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1c1a17;
    --surface:#262420;
    --surface-2:#302d27;
    --ink:#f9f6ef;
    --ink-soft:#d7d2c5;
    --ink-faint:#a8a196;
    --border:rgba(249,246,239,0.14);
    --border-strong:rgba(249,246,239,0.24);

    --accent:#e2683e;
    --accent-strong:#ef7c52;
    --accent-tint:rgba(226,104,62,0.16);
    --accent-ink:#f0a988;

    --warn:#e1a94e;
    --warn-ink:#f1c888;
    --warn-tint:rgba(225,169,78,0.16);

    --good:#e2683e;
    --good-ink:#f0a988;
    --good-tint:rgba(226,104,62,0.16);

    --btn-bg:var(--accent);
    --btn-ink:#1c1a17;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 22px 60px -28px rgba(0,0,0,.7);
    --ring:0 0 0 3px rgba(226,104,62,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#1c1a17;
  --surface:#262420;
  --surface-2:#302d27;
  --ink:#f9f6ef;
  --ink-soft:#d7d2c5;
  --ink-faint:#a8a196;
  --border:rgba(249,246,239,0.14);
  --border-strong:rgba(249,246,239,0.24);
  --accent:#e2683e;
  --accent-strong:#ef7c52;
  --accent-tint:rgba(226,104,62,0.16);
  --accent-ink:#f0a988;
  --warn:#e1a94e;
  --warn-ink:#f1c888;
  --warn-tint:rgba(225,169,78,0.16);
  --good:#e2683e;
  --good-ink:#f0a988;
  --good-tint:rgba(226,104,62,0.16);
  --btn-bg:var(--accent);
  --btn-ink:#1c1a17;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 22px 60px -28px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(226,104,62,.4);
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100vh;
}

/* Restrained grain overlay — same recipe as the landing page + demo. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.02;}
}

:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:4px;}

/* Skip link */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:var(--radius-sm);
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;}

/* Screen-reader-only utility */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* ---------- Wordmark ---------- */
.wordmark{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-body);font-weight:600;font-size:1.12rem;
  letter-spacing:-.01em;color:var(--ink);
}
.wordmark .mark{display:grid;place-items:center;}
.wordmark .mark svg{width:22px;height:22px;display:block;}
.wordmark em{font-style:normal;color:var(--accent-strong);}

/* ---------- Badge ---------- */
.badge{
  font-size:.72rem;font-weight:600;letter-spacing:.03em;
  color:var(--accent-ink);background:var(--accent-tint);
  border:1px solid transparent;
  border-radius:999px;padding:4px 11px;white-space:nowrap;
  text-transform:uppercase;
}

/* ---------- Buttons ---------- */
.btn{
  font:inherit;font-weight:600;font-size:.92rem;line-height:1;
  border-radius:999px;padding:11px 20px;cursor:pointer;min-height:44px;
  border:1px solid transparent;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink);}
.btn-small{min-height:38px;padding:9px 15px;font-size:.85rem;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;}

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