/* =============================================================================
   Do Better Norge — AI Legal Tools
   Color & Typography tokens
   Source of truth: dobetternorge-tools/assets/css/tools.css :root + showcase
   ============================================================================= */

:root {
  /* ── Surface / structural ───────────────────────────────────────────── */
  --dbn-bg:            #f7f8fb;   /* app & page background */
  --dbn-panel:         #ffffff;   /* cards, rails, panels */
  --dbn-panel-tinted:  #fbfcfe;   /* nested cards, source rows, empty states */
  --dbn-line:          #d8dde7;   /* hairline borders, dividers */

  /* ── Ink (foreground text) ──────────────────────────────────────────── */
  --dbn-ink:           #1b2330;   /* primary body / headings */
  --dbn-ink-soft:      #314158;   /* secondary headings, numeric chips */
  --dbn-muted:         #667085;   /* secondary copy, labels, helper text */
  --dbn-muted-2:       #98a2b3;   /* tertiary / waiting status */

  /* ── Brand primary — Norway flag BLUE ───────────────────────────────── */
  /* Pantone 281 C. Primary action, links, eyebrow, active state. The depth
     of the navy is intentional — it carries the "official / institutional"
     register a legal-research product needs. */
  --dbn-teal:          #00205B;   /* PRIMARY · Norway flag blue */
  --dbn-teal-dark:     #001A4D;   /* hover, dark-on-light text */
  --dbn-teal-soft:     #E6EAF2;   /* tinted bg, active tab, pill bg */
  --dbn-teal-soft-2:   #C9D2E5;   /* hover tint of soft */
  --dbn-teal-ring:     rgba(0, 32, 91, 0.35); /* focus outline */

  /* ── Brand secondary — Norway flag RED (citations, partisan, CTA) ────── */
  /* Pantone 200 C. Reserved for citation chips, source numbers, the
     showcase CTA, the Advocate "take a side" signal, and the running-trace
     pulse. Never use red as a generic primary — that's flag-blue's job. */
  --dbn-coral:         #BA0C2F;   /* ACCENT · Norway flag red */
  --dbn-coral-dark:    #8E0926;   /* hover */
  --dbn-coral-soft:    #FBE5E9;
  --dbn-coral-edge:    #E7B7C0;   /* red hairline */

  /* Convenience aliases — prefer these in new code, the *-teal/*-coral
     names are kept only so existing components keep working. */
  --dbn-flag-blue-primary:  var(--dbn-teal);
  --dbn-flag-blue-dark:     var(--dbn-teal-dark);
  --dbn-flag-blue-soft:     var(--dbn-teal-soft);
  --dbn-flag-red:           var(--dbn-coral);
  --dbn-flag-red-dark:      var(--dbn-coral-dark);
  --dbn-flag-red-soft:      var(--dbn-coral-soft);
  --dbn-flag-white:         #FFFFFF;

  /* ── Brand tertiary — Amber (notice, "running", disclaimers) ────────── */
  --dbn-amber:         #b7791f;
  --dbn-amber-soft:    #fff9f2;
  --dbn-amber-edge:    #f0d6bc;
  --dbn-amber-ink:     #68420d;   /* dark text on amber bg */

  /* ── Semantic — Confidence / status palette (used in timeline, badges) */
  --dbn-success:       #16a34a;
  --dbn-success-soft:  #dcfce7;
  --dbn-success-ink:   #15803d;
  --dbn-warning:       #d97706;
  --dbn-warning-soft:  #fef3c7;
  --dbn-warning-ink:   #b45309;
  --dbn-danger:        #b41e1e;
  --dbn-danger-soft:   #fee2e2;
  --dbn-danger-ink:    #991b1b;
  --dbn-neutral-chip:  #eef0f5;   /* low confidence / muted badge bg */

  /* ── Speaker / categorical palette (transcribe tool) ────────────────── */
  --dbn-cat-blue-bg:   #dbeafe;  --dbn-cat-blue-ink:   #1d4ed8;
  --dbn-cat-violet-bg: #ede9fe;  --dbn-cat-violet-ink: #6d28d9;
  --dbn-cat-green-bg:  #dcfce7;  --dbn-cat-green-ink:  #166534;
  --dbn-cat-yellow-bg: #fef9c3;  --dbn-cat-yellow-ink: #854d0e;
  --dbn-cat-red-bg:    #fee2e2;  --dbn-cat-red-ink:    #991b1b;

  /* ── Parent-site bridge ─────────────────────────────────────────────── */
  /* Historically a separate token; now the primary brand colour is itself
     flag-blue, so this alias just points at the primary. The SSO bridge
     card on the gate uses the same blue with a 6% alpha bg. */
  --dbn-flag-blue:     var(--dbn-teal);

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --dbn-shadow-card:   0 18px 45px rgba(25, 35, 52, 0.10);
  --dbn-shadow-soft:   0 4px 16px rgba(0, 32, 91, 0.10);
  --dbn-shadow-modal:  0 28px 92px rgba(0, 0, 0, 0.34);
  --dbn-overlay:       rgba(23, 32, 51, 0.62);

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --dbn-r-xs:          4px;   /* date-type badge, small chip */
  --dbn-r-sm:          6px;   /* dense controls, alias inputs */
  --dbn-r-md:          8px;   /* default — buttons, panels, cards, inputs */
  --dbn-r-pill:        999px; /* status pill, tag, cite chip */

  /* ── Spacing (Inter-friendly 4/6/8/10/12/14/16/18/24/32/48/64 rhythm) */
  --dbn-space-1:       4px;
  --dbn-space-2:       8px;
  --dbn-space-3:       12px;
  --dbn-space-4:       16px;
  --dbn-space-5:       18px;   /* app-shell side padding */
  --dbn-space-6:       24px;
  --dbn-space-8:       32px;
  --dbn-space-10:      48px;
  --dbn-space-12:      64px;

  /* ── Typography — family ────────────────────────────────────────────── */
  /* SUBSTITUTION NOTE: Tools site declares the system stack
     "Inter, ui-sans-serif, system-ui, -apple-system, …". We pull Inter from
     Google Fonts in fonts/inter.css so cards render identically out-of-org. */
  --dbn-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
                   BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dbn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                   "Liberation Mono", monospace;

  /* ── Typography — weight scale ──────────────────────────────────────── */
  --dbn-w-regular:     400;
  --dbn-w-medium:      500;
  --dbn-w-semibold:    600;
  --dbn-w-bold:        700;
  --dbn-w-heavy:       800;
  --dbn-w-black:       900;

  /* ── Typography — size scale (rem on a 16px root) ───────────────────── */
  --dbn-fs-3xs:        0.66rem;   /* trace marker number */
  --dbn-fs-2xs:        0.70rem;   /* eyebrow on stat, table TH, stack TAG */
  --dbn-fs-xs:         0.78rem;   /* status pill, badge, hint */
  --dbn-fs-sm:         0.84rem;   /* table TD, table caption, queue item */
  --dbn-fs-body:       0.92rem;   /* default body, disclaimer */
  --dbn-fs-md:         1.00rem;   /* answer / brief copy */
  --dbn-fs-lg:         1.05rem;   /* corpus section title */
  --dbn-fs-xl:         1.20rem;   /* source modal title */
  --dbn-fs-2xl:        1.50rem;   /* section-heading (h2 on showcase) */
  --dbn-fs-3xl:        2.00rem;   /* stat value, hiw step number */
  --dbn-fs-display:    clamp(2rem, 5vw, 3rem); /* showcase hero */

  /* ── Typography — line-height ───────────────────────────────────────── */
  --dbn-lh-tight:      1.10;   /* hero, big display */
  --dbn-lh-snug:       1.25;   /* modal title */
  --dbn-lh-normal:     1.45;
  --dbn-lh-relaxed:    1.55;   /* body, gate copy */
  --dbn-lh-loose:      1.65;   /* brief / answer */

  /* ── Typography — letter-spacing ────────────────────────────────────── */
  --dbn-tracking-tight: -0.02em;  /* big numbers (stat value) */
  --dbn-tracking-cap:    0.06em;  /* eyebrow / cap labels */
  --dbn-tracking-cap-2:  0.04em;
  --dbn-tracking-cap-sm: 0.03em;  /* badge */
}

/* =============================================================================
   Base — use these on bare elements within the design system
   ============================================================================= */

html {
  font-family: var(--dbn-font-sans);
  color: var(--dbn-ink);
  background: var(--dbn-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3, h4, p { margin-top: 0; }

/* =============================================================================
   Semantic type tokens — apply via class (.dbn-eyebrow, .dbn-h1, etc.)
   Mirrors the implicit type stack derived from tools.css.
   ============================================================================= */

.dbn-eyebrow {
  margin: 0 0 var(--dbn-space-1);
  color: var(--dbn-teal);
  font-size: var(--dbn-fs-xs);
  font-weight: var(--dbn-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--dbn-tracking-cap-2);
}

.dbn-display {                /* showcase hero h1 */
  font-size: var(--dbn-fs-display);
  font-weight: var(--dbn-w-heavy);
  line-height: var(--dbn-lh-tight);
  color: #fff;
  margin: 0;
}

.dbn-h1 {                     /* topbar h1, "Legal Tools" */
  font-size: 1.5rem;
  font-weight: var(--dbn-w-heavy);
  line-height: 1.2;
  color: var(--dbn-ink);
}

.dbn-h2 {                     /* section heading, tool title */
  font-size: var(--dbn-fs-2xl);
  font-weight: var(--dbn-w-heavy);
  line-height: 1.2;
  color: var(--dbn-ink);
}

.dbn-h3 {                     /* card title, source title */
  font-size: var(--dbn-fs-md);
  font-weight: var(--dbn-w-bold);
  line-height: 1.35;
  color: var(--dbn-ink);
}

.dbn-h4 {                     /* category card / source card title */
  font-size: 0.88rem;
  font-weight: var(--dbn-w-bold);
  line-height: 1.3;
  color: var(--dbn-ink);
}

.dbn-body {                   /* default paragraph */
  font-size: var(--dbn-fs-body);
  line-height: var(--dbn-lh-relaxed);
  color: var(--dbn-ink);
}

.dbn-body-soft {              /* muted secondary copy */
  font-size: var(--dbn-fs-body);
  line-height: var(--dbn-lh-relaxed);
  color: var(--dbn-muted);
}

.dbn-answer {                 /* result/brief body (longer reading) */
  font-size: var(--dbn-fs-md);
  line-height: var(--dbn-lh-loose);
  color: var(--dbn-ink);
}

.dbn-small {
  font-size: var(--dbn-fs-sm);
  line-height: var(--dbn-lh-normal);
  color: var(--dbn-muted);
}

.dbn-cap {                    /* uppercase badge / table TH text */
  font-size: var(--dbn-fs-2xs);
  font-weight: var(--dbn-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--dbn-tracking-cap);
  color: var(--dbn-muted);
}

.dbn-code,
.dbn-mono {
  font-family: var(--dbn-font-mono);
  font-size: 0.86em;
  background: var(--dbn-teal-soft);
  color: var(--dbn-ink);
  padding: 1px 5px;
  border-radius: var(--dbn-r-xs);
}

.dbn-num {                    /* big stat number */
  font-size: var(--dbn-fs-3xl);
  font-weight: var(--dbn-w-heavy);
  letter-spacing: var(--dbn-tracking-tight);
  line-height: 1;
  color: var(--dbn-teal);
  font-variant-numeric: tabular-nums;
}
