/* ============================================================
   Dang! Design System — colors & type
   v1.0 — Warm Obsidian palette, frozen March 2026
   ============================================================ */

:root {
  /* ── Core neutrals ─────────────────────────────────────── */
  --dang-bg:            #F7F5F2;  /* app background */
  --dang-card:          #FFFFFF;  /* risk cards, chat bubbles, surfaces */
  --dang-text:          #17191B;  /* primary text */
  --dang-text-2:        #5F6468;  /* secondary text, descriptions, labels */
  --dang-text-3:        #9E9A94;  /* tertiary text, timestamps */
  --dang-text-4:        #B0ACA8;  /* quaternary / hint / disabled */
  --dang-border:        #DDD7CF;  /* dividers, card borders, input borders */
  --dang-border-2:      #E4E0DA;  /* softer dividers */
  --dang-disabled:      #D4CEC8;  /* disabled text fallback */

  /* ── Brand accent (Copper) ─────────────────────────────── */
  --dang-accent:        #7A5842;  /* CTAs, active states, user chat bubbles, logo "!" */
  --dang-accent-press:  #654836;  /* pressed/hover state */
  --dang-accent-surface:#EFE7E0;  /* light accent bg (confidence badges, avatars) */
  --dang-accent-ghost:  #FBF5F0;  /* barely-there copper tint (expanded clause bg) */

  /* ── Reversed / dark contexts ──────────────────────────── */
  --dang-obsidian:      #111315;  /* dark bg, app icon, logo text */
  --dang-cream:         #F4F0E8;  /* text on dark */
  --dang-copper-light:  #C4946E;  /* "!" on dark, icon accent */

  /* ── Functional severity (NEVER branding) ──────────────── */
  --dang-high:          #B83030;  /* HIGH — attention */
  --dang-high-bg:       #FDEAEA;
  --dang-med:           #A56A1F;  /* MEDIUM — worth checking */
  --dang-med-bg:        #FEF3E6;
  --dang-clear:         #4F6B57;  /* ALL CLEAR text */
  --dang-clear-accent:  #4A8A50;  /* ALL CLEAR check / border */
  --dang-clear-bg:      #EDF5EF;
  --dang-low-text:      #3A7A3A;  /* LOW badge text */
  --dang-low-bg:        #F0FAF0;

  /* ── Type (system-native stack; stays close to iOS/SFPro feel) ── */
  --dang-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    "Segoe UI", "Inter", system-ui, sans-serif;
  --dang-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                    "Segoe UI", "Inter", system-ui, sans-serif;
  --dang-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Body sizes — v1.2 principles, 11px floor */
  --dang-text-body:      17px;   /* body, weight 400 */
  --dang-text-secondary: 15px;   /* secondary */
  --dang-text-label:     13px;   /* labels */
  --dang-text-caption:   12px;   /* captions, disclaimers */
  --dang-text-micro:     11px;   /* floor — badges, micro labels */

  /* Display sizes — wordmark + headlines */
  --dang-text-wordmark-xl: 48px;  /* privacy overlay, splash */
  --dang-text-wordmark-lg: 34px;  /* upload/analyzing header */
  --dang-text-wordmark-md: 20px;  /* in-report nav header */
  --dang-text-headline:    26px;  /* hero headline */
  --dang-text-title:       20px;  /* section titles */
  --dang-text-subtitle:    18px;  /* subtitles */

  /* Weights — NO 800 or "bold" keyword */
  --dang-w-regular:  400;
  --dang-w-semibold: 600;  /* headings, titles */
  --dang-w-bold:     700;  /* scores, emphasis */
  --dang-w-black:    900;  /* wordmark "Dang!" only */

  /* Line heights */
  --dang-lh-tight:  1.25;
  --dang-lh-snug:   1.40;
  --dang-lh-normal: 1.47;  /* 17/24 ish */
  --dang-lh-loose:  1.60;

  /* Letter spacing */
  --dang-ls-wordmark-lg: -2px;
  --dang-ls-wordmark-md: -1px;
  --dang-ls-wordmark-sm: -0.5px;
  --dang-ls-micro:       0.5px;  /* ALL-CAPS labels */

  /* ── Radii ─────────────────────────────────────────────── */
  --dang-radius-sm:   4px;   /* severity badges */
  --dang-radius-md:   8px;   /* inline banners, expanded cards */
  --dang-radius-lg:   10px;  /* chat chips, icon boxes */
  --dang-radius-xl:   12px;  /* mini cards, modal inputs */
  --dang-radius-2xl:  14px;  /* primary cards, buttons */
  --dang-radius-3xl:  16px;  /* step-list container */
  --dang-radius-sheet:20px;  /* bottom sheets */
  --dang-radius-pill: 22px;  /* chat input, avatar */

  /* ── Spacing (app uses ad-hoc multiples of 2; baseline 4) ── */
  --dang-s-1:  4px;
  --dang-s-2:  8px;
  --dang-s-3:  10px;
  --dang-s-4:  12px;
  --dang-s-5:  14px;
  --dang-s-6:  16px;
  --dang-s-7:  18px;
  --dang-s-8:  20px;
  --dang-s-10: 24px;
  --dang-s-12: 28px;
  --dang-s-14: 32px;

  /* ── Borders ───────────────────────────────────────────── */
  --dang-border-hairline: 0.5px;   /* card borders, dividers */
  --dang-border-thin:     1px;
  --dang-border-med:      1.5px;   /* ghost button, secondary outline */
  --dang-border-accent:   2px;     /* all-clear left-border */
  --dang-border-risk:     3px;     /* HIGH/MEDIUM/LOW left-border */

  /* ── Shadows — almost none. Structure over effects. ──── */
  --dang-shadow-none:  none;
  --dang-shadow-modal: 0 -8px 24px rgba(17, 19, 21, 0.08);  /* bottom sheet lift */

  /* ── Motion ───────────────────────────────────────────── */
  --dang-ease-out:     cubic-bezier(0.33, 1, 0.68, 1);  /* Easing.out(cubic) */
  --dang-ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --dang-dur-fast:     100ms;
  --dang-dur-normal:   250ms;
  --dang-dur-slow:     500ms;

  /* ── Min touch target (iOS HIG) ────────────────────────── */
  --dang-hit-target: 44px;
}

/* ============================================================
   Semantic base — drop-in element styles
   ============================================================ */

html, body {
  background: var(--dang-bg);
  color: var(--dang-text);
  font-family: var(--dang-font-sans);
  font-size: var(--dang-text-body);
  line-height: var(--dang-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings map to wordmark/title sizes — never weight 800 */
h1 { font-size: var(--dang-text-headline); font-weight: var(--dang-w-semibold); line-height: var(--dang-lh-tight); color: var(--dang-text); letter-spacing: -0.3px; margin: 0; }
h2 { font-size: var(--dang-text-title);    font-weight: var(--dang-w-semibold); line-height: var(--dang-lh-snug);  color: var(--dang-text); margin: 0; }
h3 { font-size: var(--dang-text-subtitle); font-weight: var(--dang-w-semibold); line-height: var(--dang-lh-snug);  color: var(--dang-text); margin: 0; }

p { font-size: var(--dang-text-body); font-weight: var(--dang-w-regular); line-height: var(--dang-lh-normal); color: var(--dang-text); margin: 0 0 var(--dang-s-4); }

small, .caption { font-size: var(--dang-text-caption); color: var(--dang-text-2); line-height: var(--dang-lh-snug); }

code, pre, kbd { font-family: var(--dang-font-mono); font-size: calc(var(--dang-text-body) - 2px); color: var(--dang-text-2); background: var(--dang-bg); border-radius: var(--dang-radius-md); }
pre { padding: var(--dang-s-3); }

a { color: var(--dang-accent); text-decoration: none; }
a:hover { color: var(--dang-accent-press); }

hr { border: 0; border-top: var(--dang-border-hairline) solid var(--dang-border); margin: var(--dang-s-10) 0; }

::selection { background: var(--dang-accent-surface); color: var(--dang-text); }

/* ============================================================
   Wordmark — the Dang! logo, CSS-only
   ============================================================ */
.dang-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--dang-font-display);
  font-weight: var(--dang-w-black);
  color: var(--dang-text);
  letter-spacing: var(--dang-ls-wordmark-lg);
  line-height: 1;
}
.dang-wordmark__bang {
  display: inline-block;
  transform: rotate(-15deg);
  transform-origin: bottom left;
  color: var(--dang-accent);
  margin-left: 5px;
  letter-spacing: 0;
}
/* Size variants */
.dang-wordmark--xl { font-size: var(--dang-text-wordmark-xl); }
.dang-wordmark--lg { font-size: var(--dang-text-wordmark-lg); letter-spacing: var(--dang-ls-wordmark-lg); }
.dang-wordmark--md { font-size: var(--dang-text-wordmark-md); letter-spacing: var(--dang-ls-wordmark-md); }
.dang-wordmark--md .dang-wordmark__bang { margin-left: 3px; }
.dang-wordmark--sm { font-size: 16px; letter-spacing: var(--dang-ls-wordmark-sm); }
.dang-wordmark--sm .dang-wordmark__bang { margin-left: 2px; }

/* Reversed (on dark) */
.dang-wordmark--reversed { color: var(--dang-cream); }
.dang-wordmark--reversed .dang-wordmark__bang { color: var(--dang-copper-light); }

/* Monochrome — bang matches text color */
.dang-wordmark--mono .dang-wordmark__bang { color: currentColor; }