/* ============================================================
   Mercatis Design System — Core Colors & Type Tokens
   ============================================================
   SOURCE OF TRUTH for tokens. Import this in every artifact.
   Reconciled against the three production Svelte apps
   (Otis, Lexis/Documents-editor, Documents) — see the
   consuming repo's migration notes for where an app still deviates.

   Mercatis apps ship in BOTH light (Otis, marketing, CRISP)
   and dark (Documents) — tokens support both via [data-theme].
   ============================================================ */

/* ---------- Brand font: Source Sans Pro ---------- */
@font-face { font-family: "Source Sans Pro"; font-weight: 200; font-style: normal;
  src: url("fonts/SourceSansPro-ExtraLight.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 200; font-style: italic;
  src: url("fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-style: normal;
  src: url("fonts/SourceSansPro-Light.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-style: italic;
  src: url("fonts/SourceSansPro-LightIt.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-style: normal;
  src: url("fonts/SourceSansPro-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-style: italic;
  src: url("fonts/SourceSansPro-It.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 600; font-style: normal;
  src: url("fonts/SourceSansPro-Semibold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 600; font-style: italic;
  src: url("fonts/SourceSansPro-SemiboldIt.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-style: normal;
  src: url("fonts/SourceSansPro-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-style: italic;
  src: url("fonts/SourceSansPro-BoldIt.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 900; font-style: normal;
  src: url("fonts/SourceSansPro-Black.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Source Sans Pro"; font-weight: 900; font-style: italic;
  src: url("fonts/SourceSansPro-BlackIt.woff") format("woff"); font-display: swap; }

/* ---------- Brand mono: Source Code Pro (CI) ---------- */
@font-face { font-family: "Source Code Pro"; font-weight: 200; font-style: normal;
  src: url("fonts/SourceCodePro-ExtraLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 300; font-style: normal;
  src: url("fonts/SourceCodePro-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 400; font-style: normal;
  src: url("fonts/SourceCodePro-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 500; font-style: normal;
  src: url("fonts/SourceCodePro-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 600; font-style: normal;
  src: url("fonts/SourceCodePro-Semibold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 700; font-style: normal;
  src: url("fonts/SourceCodePro-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Source Code Pro"; font-weight: 900; font-style: normal;
  src: url("fonts/SourceCodePro-Black.otf") format("opentype"); font-display: swap; }

:root {
  /* ---------- Brand Orange (anchor #FF993D) ---------- */
  --mc-orange-50:  #FFF5EB;
  --mc-orange-100: #FFE4C7;
  --mc-orange-200: #FFCE99;
  --mc-orange-300: #FFB870;
  --mc-orange-400: #FFB066;
  --mc-orange-500: #FF993D;   /* PRIMARY — logo, CTAs, accents */
  --mc-orange-600: #E67D1F;   /* pressed/active */
  --mc-orange-700: #B8621A;
  --mc-orange-800: #8A4813;
  --mc-orange-900: #5C300C;

  /* ---------- Neutrals (warmed to match CI print grays: #7C7C7B, #7E7D7E) ---------- */
  --mc-white:      #FFFFFF;
  --mc-gray-50:    #FAFAF9;
  --mc-gray-100:   #F5F4F2;
  --mc-gray-200:   #EEEDEB;
  --mc-gray-300:   #D9D8D5;
  --mc-gray-400:   #BDBCB9;
  --mc-gray-500:   #8C8B88;
  --mc-gray-600:   #7C7C7B;  /* CI PANTONE 425 U / DB 703 */
  --mc-gray-700:   #595857;
  --mc-gray-800:   #333230;
  --mc-gray-900:   #1A1A19;
  --mc-black:      #0A0A0A;

  /* ---------- Semantic status ---------- */
  --mc-success:    #4CAF50;
  --mc-warning:    #F5A623;
  --mc-error:      #D32F2F;
  --mc-info:       #2196F3;

  /* ---------- Severity foreground (badges + classification chips) ----------
     Solid text colours placed on the tinted status fills below. Ported from
     Lexis (--mc-sev-*-fg): darker in light mode so text stays legible on the
     ~12-15% alpha fill; lightened under [data-theme="dark"]. */
  --mc-sev-ok-fg:   #2E7D32;
  --mc-sev-info-fg: #1565C0;
  --mc-sev-warn-fg: #B35A00;
  --mc-sev-crit-fg: #C62828;

  /* ============================================================
     DEFERRED PALETTE — "Nebenfarben" (CI sheet)
     ============================================================
     DO NOT use these in product UI, marketing layouts, or app
     chrome. The single accent is --mc-accent (orange).
     Use ONLY for data-viz (charts, diagrams, categorical legends)
     or infographics needing >=4 distinguishable categories.
     Never for buttons, CTAs, links, focus rings, chips, badges,
     card borders, or section backgrounds.
     ============================================================ */
  --mc-brand-blue:     #5B8EDC;   /* PANTONE 279 U — secondary Hauptfarbe (data-viz only) */
  --mc-brand-blue-pale:#E1E9F7;   /* PANTONE 649 U — pale blue (print Nebenfarbe) */
  --mc-neben-green:    #26AB6B;
  --mc-neben-green-mid:#79C691;
  --mc-neben-green-pale:#AEDBC2;
  --mc-neben-red:      #F15A4A;
  --mc-neben-yellow:   #FABD45;
  --mc-neben-purple:   #6C5CA8;

  /* ---------- File / folder type tints (Documents app) ----------
     12-15% alpha bg + solid fg, for file-type icons and chips in a
     document/folder manager. Identical in both themes. Apps-only —
     not a general decorative palette. */
  --mc-tint-pdf-bg:    rgba(211, 47, 47, 0.14);  --mc-tint-pdf-fg:    #D32F2F;
  --mc-tint-text-bg:   rgba(33, 150, 243, 0.14); --mc-tint-text-fg:   #2196F3;
  --mc-tint-json-bg:   rgba(124, 77, 255, 0.14); --mc-tint-json-fg:   #7C4DFF;
  --mc-tint-image-bg:  rgba(76, 175, 80, 0.14);  --mc-tint-image-fg:  #4CAF50;
  --mc-tint-video-bg:  rgba(255, 153, 61, 0.14); --mc-tint-video-fg:  #FF993D;
  --mc-tint-folder-bg: rgba(255, 153, 61, 0.14); --mc-tint-folder-fg: #FF993D;

  /* ---------- Tag chip palette (from CRISP) ---------- */
  --mc-chip-bg:    #F5F4F2;
  --mc-chip-fg:    #595857;
  --mc-chip-border:#E6E5E2;

  /* ---------- Semantic Tokens — LIGHT (default) ---------- */
  --mc-bg:          var(--mc-white);          /* #FFFFFF  — tier 1 */
  --mc-bg-muted:    #F5F4F2;                  /* gray-100 — tier 2 (warm) */
  --mc-bg-subtle:   var(--mc-gray-50);
  --mc-surface:     var(--mc-white);
  --mc-surface-2:   #EDECE9;                  /* tier 3 — warm gray, visibly below bg-muted */
  --mc-border:      var(--mc-gray-300);
  --mc-border-subtle:#EEEDEB;
  --mc-fg:          var(--mc-gray-900);
  --mc-fg-muted:    var(--mc-gray-700);
  --mc-fg-subtle:   var(--mc-gray-500);
  --mc-fg-inverse:  var(--mc-white);      /* text on a dark/neutral inverse surface */
  --mc-accent:      var(--mc-orange-500);
  --mc-accent-hover:var(--mc-orange-400);
  --mc-accent-active:var(--mc-orange-600);
  --mc-accent-bg:   #FFF5EB;        /* orange-tinted selection bg */
  /* Orange used as LEGIBLE TEXT / active-nav label / meaningful icon. orange-700 is 5.2:1 on
     white — passes AA for body text, unlike --mc-accent (2.6:1) or --mc-accent-active (3.0:1).
     Use this for active sidebar labels, accent links, and icons that carry meaning. */
  --mc-accent-text: var(--mc-orange-700);
  /* Text / icon colour placed ON an orange (accent) fill — e.g. primary buttons,
     the Otis user bubble. #1A1A19 on #FF993D is ~8.3:1; WHITE on #FF993D is only
     ~2.1:1 and FAILS AA even for large text. Primary buttons MUST use this, not
     --mc-fg-inverse. (Adopted from Otis; Lexis + Documents still ship white — see the consuming repo's migration notes.) */
  --mc-on-accent:   #1A1A19;

  /* ---------- Surface tiers (4-level) ----------
     Used for depth: page bg → card → nested → hover/deeply-nested.
     bg < bg-muted < surface-2 < surface-3 (each darker/more tinted). */
  --mc-surface-3:   #E0DFDC;        /* table headers, button hover, code-block headers (warm) */
  --mc-bg-hover:    var(--mc-surface-3); /* alias for hover background */

  /* ---------- Focus ring (ONE consistent model) ----------
     A single box-shadow ring, ALWAYS paired with `outline: none`. Do NOT combine
     `outline` + `box-shadow`, and do NOT redeclare focus per component — that is
     what produced the "double outline". The 2px inner gap uses --mc-bg so it reads
     as a gap, not a second line, on any surface (and it stays theme-aware, so the
     dark theme needs no override). Opt into --mc-shadow-focus-soft only on the
     densest chrome (chat, toolbars, many adjacent focusables). */
  --mc-focus-ring:  var(--mc-accent);
  --mc-shadow-focus-ring: 0 0 0 2px var(--mc-bg), 0 0 0 4px var(--mc-accent);
  --mc-shadow-focus-soft: 0 0 0 3px color-mix(in srgb, var(--mc-accent) 30%, transparent);
  /* legacy alias — consumers that referenced -solid still get the single ring */
  --mc-shadow-focus-solid: var(--mc-shadow-focus-ring);

  /* ---------- Typography ---------- */
  --mc-font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --mc-font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  /* Scale */
  --mc-text-xs:   0.75rem;   /* 12 */
  --mc-text-sm:   0.875rem;  /* 14 — app body, meta, contact */
  --mc-text-base: 1rem;      /* 16 — marketing body */
  --mc-text-md:   1.125rem;  /* 18 */
  --mc-text-lg:   1.25rem;   /* 20 — H3 cards */
  --mc-text-xl:   1.5rem;    /* 24 */
  --mc-text-2xl:  1.75rem;   /* 28 — H2 section */
  --mc-text-3xl:  2.25rem;   /* 36 */
  --mc-text-4xl:  2.5rem;    /* 40 — H1 */
  --mc-text-5xl:  3rem;      /* 48 */

  --mc-leading-tight:  1.2;
  --mc-leading-snug:   1.35;
  --mc-leading-normal: 1.6;

  --mc-weight-regular: 400;
  --mc-weight-medium:  500;
  --mc-weight-semibold:600;
  --mc-weight-bold:    700;

  --mc-track-tight:  -0.01em;
  --mc-track-normal: 0; /* @kind other */
  --mc-track-caps:   0.05em;   /* ALL CAPS headings */
  --mc-track-button: 0.03em;

  /* ---------- Radii (em-based, scale with font-size) ----------
     Canonical: 4px inputs/buttons, 8px cards. (Documents ships a larger
     "Actis" scale — 8px inputs / 12px cards — pending convergence; see the consuming repo's migration notes.) */
  --mc-radius-xs: 0.125em;   /* ~2px  @ 16px */
  --mc-radius-sm: 0.25em;    /* ~4px  · buttons, inputs */
  --mc-radius-md: 0.375em;   /* ~6px */
  --mc-radius-lg: 0.5em;     /* ~8px  · cards */
  --mc-radius-xl: 0.75em;    /* ~12px */
  --mc-radius-pill: 999em;

  /* ---------- Elevation / Shadows ---------- */
  --mc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --mc-shadow:    0 2px 8px rgba(0,0,0,0.08);      /* card resting */
  --mc-shadow-md: 0 4px 16px rgba(0,0,0,0.12);     /* card hover / modal */
  --mc-shadow-lg: 0 10px 30px rgba(0,0,0,0.15);    /* dropdowns, popovers, toasts */
  --mc-shadow-focus: var(--mc-shadow-focus-solid);
  /* Segmented-control active pill — the only hint of depth inside chrome */
  --mc-shadow-segmented: 0 1px 2px rgba(0,0,0,0.08);

  /* ---------- Spacing (4pt grid) ---------- */
  --mc-space-1:  4px;
  --mc-space-2:  8px;
  --mc-space-3:  12px;
  --mc-space-4:  16px;
  --mc-space-5:  24px;
  --mc-space-6:  32px;
  --mc-space-7:  48px;
  --mc-space-8:  64px;
  --mc-space-9:  96px;

  /* Layout */
  --mc-container-max: 1200px;
  --mc-section-py:    6rem;
  --mc-sidebar-w:     240px;   /* app shell sidebar */
  --mc-inspector-w:   320px;   /* app shell inspector */

  /* Motion */
  --mc-ease:      cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --mc-ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --mc-dur-fast:   120ms; /* @kind other */
  --mc-dur-base:   200ms; /* @kind other */
  --mc-dur-slow:   320ms; /* @kind other */
}

/* ============================================================
   DARK THEME — used by Documents app.
   Orange-500 stays constant; neutrals invert (warm-lifted).
   ============================================================ */
[data-theme="dark"] {
  --mc-bg:          #1A1A19;
  --mc-bg-muted:    #232321;
  --mc-bg-subtle:   #1E1E1C;
  --mc-surface:     #24241F;   /* intentional warm lift */
  --mc-surface-2:   #2E2E2B;
  --mc-surface-3:   #3A3A37;           /* deepest tier in dark */
  --mc-bg-hover:    var(--mc-surface-3);
  --mc-border:      #3A3A37;
  --mc-border-subtle:#2E2E2B;
  --mc-fg:          #F2F2F0;
  --mc-fg-muted:    #B8B7B4;
  --mc-fg-subtle:   #888784;
  --mc-fg-inverse:  #1A1A19;
  --mc-on-accent:   #1A1A19;          /* orange is light in both themes — text stays dark */
  --mc-accent-bg:   rgba(255, 153, 61, 0.12);
  --mc-accent-text: var(--mc-orange-300);   /* on dark, a lighter orange is the legible text/label */
  --mc-chip-bg:     #2E2E2B;
  --mc-chip-fg:     #B8B7B4;
  --mc-chip-border: #3A3A37;

  /* Severity foreground — lightened so it reads on the dark translucent fills */
  --mc-sev-ok-fg:   #81C784;
  --mc-sev-info-fg: #64B5F6;
  --mc-sev-warn-fg: #FFB74D;
  --mc-sev-crit-fg: #EF9A9A;

  --mc-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --mc-shadow:      0 2px 8px rgba(0,0,0,0.5);
  --mc-shadow-md:   0 4px 16px rgba(0,0,0,0.6);
  /* focus ring is theme-aware via --mc-bg/--mc-accent in :root — no override needed */
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html, body {
  font-family: var(--mc-font-sans);
  font-size: var(--mc-text-base);
  line-height: var(--mc-leading-normal);
  color: var(--mc-fg);
  background: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--mc-weight-bold); }

h1 {
  font-size: var(--mc-text-4xl);
  line-height: var(--mc-leading-tight);
  letter-spacing: var(--mc-track-tight);
}
h2 {
  font-size: var(--mc-text-2xl);
  line-height: var(--mc-leading-snug);
  letter-spacing: var(--mc-track-caps);
  text-transform: uppercase;
}
h3 {
  font-size: var(--mc-text-lg);
  line-height: var(--mc-leading-snug);
  font-weight: var(--mc-weight-semibold);
}
h4 {
  font-size: var(--mc-text-base);
  font-weight: var(--mc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-caps);
  color: var(--mc-fg-muted);
}

p { margin: 0 0 1rem; }

small, .mc-small { font-size: var(--mc-text-sm); color: var(--mc-fg-muted); }

code, pre, kbd, samp {
  font-family: var(--mc-font-mono);
  font-size: 0.92em;
}

/* Default link = a real inline text link. The underline uses text-decoration
   (which hugs the text) NOT a border-bottom (which draws a box-wide line across
   any padded/rounded element that happens to be an <a> — nav rows, cards, menu
   items). Components with their own background/padding stay text-decoration:none. */
a {
  color: var(--mc-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--mc-dur-fast) var(--mc-ease),
              text-decoration-color var(--mc-dur-fast) var(--mc-ease);
}
a:hover { color: var(--mc-accent-active); text-decoration-color: currentColor; }
/* ONE focus model for every interactive element: outline off + single ring.
   Components inherit this — they must not add their own outline or box-shadow. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--mc-shadow-focus);
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

::selection { background: var(--mc-accent-bg); color: var(--mc-fg); }

/* Utility: uppercase eyebrow — canonical Mercatis section header style */
.mc-eyebrow {
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-caps);
  color: var(--mc-fg-muted);
}