/* ════════════════════════════════════════════════════════
   CORVUS — Design Tokens & Base Overrides

   Three-layer token model:
     1. Primitives  — colour / value names (--cv-red, --cv-blue)
     2. Semantic    — role aliases over primitives (--cv-color-danger,
                      --cv-color-primary). Component CSS references THIS
                      layer only, never the primitives directly.
     3. Components  — class names with semantic variants
                      (.cv-btn-primary, .cv-badge-danger)
   ════════════════════════════════════════════════════════ */

:root {
  /* ─── Layer 1 — Primitive tokens (colour values) ─── */
  --cv-navy:       #0f1d2e;
  --cv-navy-mid:   #1a2f47;
  --cv-blue:       #1d72e8;
  --cv-blue-soft:  #e8f1fd;
  --cv-blue-dark:  #1558c0;
  --cv-teal:       #0ea5a0;
  --cv-amber:      #f59e0b;
  --cv-amber-soft: #fef3c7;
  --cv-red:        #dc2626;
  --cv-red-soft:   #fee2e2;
  --cv-green:      #16a34a;
  --cv-green-soft: #dcfce7;
  --cv-surface:    #f0f4f8;
  --cv-border:     #e2e8f0;
  --cv-border-mid: #cbd5e1;
  --cv-text:       #0f172a;
  --cv-text-on-dark: #f1f5f9;
  --cv-muted:      #64748b;
  --cv-white:      #ffffff;
  --cv-shadow:     0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --cv-shadow-md:  0 4px 16px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.06);

  /* ─── Layer 2 — Semantic tokens (role aliases) ───
     Component CSS references THESE, never the primitives.
     Change a colour theme by swapping the right-hand side here.            */

  /* Action / brand */
  --cv-color-primary:        var(--cv-blue);
  --cv-color-primary-hover:  var(--cv-blue-dark);
  --cv-color-primary-soft:   var(--cv-blue-soft);

  /* States — used by badges, alerts, widgets, work items, fingerprints */
  --cv-color-danger:         var(--cv-red);
  --cv-color-danger-soft:    var(--cv-red-soft);
  --cv-color-warning:        var(--cv-amber);
  --cv-color-warning-soft:   var(--cv-amber-soft);
  --cv-color-success:        var(--cv-green);     /* COMPLETE / verified outcome only — not "in progress on-time" */
  --cv-color-success-soft:   var(--cv-green-soft);

  /* `info` is deprecated as a distinct state. Use `neutral` instead.
     If you need a brand-tinted neutral, layer the neutral background with
     a small blue accent (icon / left border). Do NOT use blue fill as a
     state signal — blue is the brand colour, not an alert colour. */

  --cv-color-neutral:        var(--cv-muted);     /* default / in-progress / not-yet-actioned / no alert */
  --cv-color-neutral-soft:   var(--cv-surface);

  /* Surfaces and structure */
  --cv-color-bg:             var(--cv-surface);    /* page background */
  --cv-color-bg-card:        var(--cv-white);      /* card / widget fill */
  --cv-color-bg-alt:         var(--cv-surface);    /* hover, alt rows */

  /* Text */
  --cv-color-text:           var(--cv-text);       /* body text */
  --cv-color-text-muted:     var(--cv-muted);      /* secondary text */
  --cv-color-text-on-dark:   var(--cv-text-on-dark); /* on navy / dark surfaces */
  --cv-color-text-link:      var(--cv-blue);
  --cv-color-text-link-hover:var(--cv-blue-dark);

  /* Borders */
  --cv-color-border:         var(--cv-border);     /* default border */
  --cv-color-border-strong:  var(--cv-border-mid); /* hover / focused */
  --cv-color-focus-ring:     var(--cv-blue);

  /* ─── Radius scale (5 values) ───
     Matches Tailwind's rounded-sm/md/lg/xl/full. Component CSS uses these
     tokens; markup uses Tailwind rounded-* classes for one-offs. */
  --cv-radius-sm:   0.125rem;   /* 2px  — fingerprint sq, small inline indicators */
  --cv-radius-md:   0.375rem;   /* 6px  — badges, tags, chips, small inline items */
  --cv-radius-lg:   0.5rem;     /* 8px  — buttons, inputs, alerts, widget tiles */
  --cv-radius-xl:   0.75rem;    /* 12px — feature cards, modals, sheets */
  --cv-radius-full: 9999px;     /* pills, avatars, progress bars, circular */
}

/* ── Base overrides ──────────────────────────────────── */

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .9375rem;
  color: var(--cv-text);
  background-color: #f0f4f8;
  background-image:
    radial-gradient(ellipse 120% 60% at 70% -10%, rgba(29,114,232,.035) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 15% 110%, rgba(14,165,160,.025) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .serif {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

h1 {
  font-size: 2rem;
  letter-spacing: -.025em;
  line-height: 1.15;
}

h2 {
  font-size: 1.35rem;
  letter-spacing: -.015em;
}

h3 {
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

a {
  color: var(--cv-blue);
  text-decoration: none;
  transition: color .12s;
}

a:hover {
  color: #1558c0;
}

::selection {
  background: rgba(29,114,232,.12);
  color: var(--cv-text);
}

::-moz-selection {
  background: rgba(29,114,232,.12);
  color: var(--cv-text);
}

*:focus-visible {
  outline: 2px solid var(--cv-blue);
  outline-offset: 2px;
  border-radius: .375rem;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cv-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cv-muted); }