/* GENERATED by tools/import.mjs from AAA-IP .claude/skills/tend-design/colors_and_type.css @ 19015a1. Do not edit:
   change the tend-design skill in AAA-IP, bump the ref, re-import. */
/* ===========================================================================
 * Tend Design System — Core Tokens
 * ===========================================================================
 *
 * Drop-in: <link rel="stylesheet" href="colors_and_type.css">
 *
 * Two systems live here:
 *   1) Foundation tokens (--leaf-500, --paper, --ink, --space-4, etc.)
 *      Use these for one-off styling.
 *   2) Semantic tokens (--bg-page, --fg-default, --color-primary, etc.)
 *      Use these in components so the system can re-skin later.
 *
 * Direction: fresh light greens, cool paper neutrals. No red, no warm sand.
 * Status states that would normally be red use Marine (deep blue) for severity
 * and Marigold (amber) for caution — Tend signals risk through institutional
 * gravity, not through alarm.
 * ========================================================================= */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/newsreader.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/dm-sans-italic.woff2') format('woff2');
}

:root {
  /* ---------- Brand: Leaf (primary, fresh green) ---------- */
  --leaf-50:  #F2F8F3;
  --leaf-100: #E2F0E6;
  --leaf-200: #C3E1CC;
  --leaf-300: #9BCEAB;
  --leaf-400: #6DB587;
  --leaf-500: #3F9D63; /* primary */
  --leaf-600: #2F8650;
  --leaf-700: #246A41;
  --leaf-800: #1B5132;
  --leaf-900: #143C26; /* ink-forest */

  /* ---------- Neutrals: Paper → Ink (cool, faint green undertone) ---------- */
  --paper:     #FBFCFB; /* page background */
  --mist:      #F2F5F2; /* alt surface, hover wash */
  --stone-100: #E7EBE7;
  --stone-200: #D3D9D4;
  --stone-300: #B3BCB6;
  --stone-400: #8C9590; /* muted text */
  --stone-500: #6B736E;
  --stone-600: #4F5853; /* secondary text */
  --stone-700: #353B38;
  --stone-800: #232826;
  --ink:       #141A17; /* primary text */

  /* ---------- Accents (used sparingly) ---------- */
  --marine-50:  #EEF3F8;
  --marine-100: #D7E2EE;
  --marine-200: #A1BAD2; /* interpolated — added for the Package 1 shell redesign (hover/border steps) */
  --marine-300: #6C92B6;
  --marine-400: #4C78A2; /* interpolated — added for the Package 1 shell redesign (hover/border steps) */
  --marine-500: #2D5F8E; /* severity / critical */
  --marine-600: #26517A; /* interpolated — added for the Package 1 shell redesign (hover/border steps) */
  --marine-700: #1F4366;
  --marine-800: #18354F; /* interpolated — added for the Package 1 shell redesign (hover/border steps) */
  --marine-900: #112739;

  --marigold-50:  #FBF5E7;
  --marigold-100: #F5E6BD;
  --marigold-300: #DDB554;
  --marigold-500: #B5862A; /* caution */
  --marigold-700: #7E5C16;

  /* ---------- Borders ---------- */
  --border-subtle:  rgba(20, 26, 23, 0.06);
  --border-default: rgba(20, 26, 23, 0.10);
  --border-strong:  rgba(20, 26, 23, 0.18);
  --divider:        rgba(20, 26, 23, 0.08);

  /* ---------- Shadow system (institutional: short, soft, low contrast) ---------- */
  --shadow-xs: 0 1px 0 rgba(20, 26, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 26, 23, 0.04), 0 1px 0 rgba(20, 26, 23, 0.03);
  --shadow-md: 0 1px 2px rgba(20, 26, 23, 0.04), 0 4px 12px rgba(20, 26, 23, 0.05);
  --shadow-lg: 0 2px 4px rgba(20, 26, 23, 0.04), 0 12px 32px rgba(20, 26, 23, 0.07);
  --shadow-focus: 0 0 0 3px rgba(63, 157, 99, 0.22); /* leaf focus ring */
  /* NOTE: production (frontend/src/index.css) intentionally uses a STRONGER
     ring here — 0 0 0 3px rgba(47, 134, 80, 0.45) — for keyboard-focus a11y
     contrast. That's a deliberate override, not drift; keep this file's
     softer value as the kit's aesthetic default and don't silently match
     production without another a11y-contrast reason to. */

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Type: families ---------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type: weights ---------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ---------- Type: scale (px) ---------- */
  --t-xs:    12px;
  --t-sm:    13px;
  --t-base:  15px; /* body */
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   64px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relax:  1.65;

  /* ===================================================================
   * Semantic tokens — prefer these in components
   * =================================================================== */

  /* Surfaces */
  --bg-page:    var(--paper);
  --bg-surface: #FFFFFF;
  --bg-sunken:  var(--mist);
  --bg-tint:    var(--leaf-50);
  --bg-tonal:   var(--leaf-100);
  --bg-inverse: var(--ink);

  /* Foreground */
  --fg-default:  var(--ink);
  --fg-strong:   #000;
  --fg-muted:    var(--stone-600);
  --fg-subtle:   var(--stone-400);
  --fg-on-leaf:  #FFFFFF;
  --fg-on-ink:   #FFFFFF;
  --fg-link:     var(--leaf-700);

  /* Brand */
  --color-primary:        var(--leaf-500);
  --color-primary-hover:  var(--leaf-600);
  --color-primary-active: var(--leaf-700);
  --color-primary-tint:   var(--leaf-100);
  --color-primary-fg:     #FFFFFF;

  /* Status (no red — see notes above) */
  --color-positive:        var(--leaf-500);
  --color-positive-tint:   var(--leaf-100);
  --color-positive-fg:     var(--leaf-800);

  --color-caution:         var(--marigold-500);
  --color-caution-tint:    var(--marigold-50);
  --color-caution-fg:      var(--marigold-700);

  --color-critical:        var(--marine-500); /* fills the "danger" slot without red */
  --color-critical-tint:   var(--marine-50);
  --color-critical-fg:     var(--marine-900);

  --color-neutral:         var(--stone-500);
  --color-neutral-tint:    var(--stone-100);
  --color-neutral-fg:      var(--stone-700);

  /* AMF condition bands (1=very poor → 5=excellent) — no red */
  --condition-1: var(--marine-700);   /* very poor → marine deep (severity) */
  --condition-2: var(--marine-300);   /* poor → marine mid */
  --condition-3: var(--marigold-500); /* fair → marigold */
  --condition-4: var(--leaf-400);     /* good → leaf light */
  --condition-5: var(--leaf-600);     /* excellent → leaf deep */
  --condition-na: var(--stone-300);
}

/* ===========================================================================
 * Semantic element styles — opt-in via .ds-prose or by using tag classes
 * (.h1, .h2, p.lead, etc). The system does NOT globally restyle h1/p so
 * it can be embedded inside other contexts safely.
 * ========================================================================= */

.ds-prose,
body.ds-root {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

.ds-display,
.ds-h1, .ds-h2, .ds-h3 {
  font-family: var(--font-display);
  color: var(--fg-default);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  font-weight: var(--weight-regular);
}

.ds-display { font-size: var(--t-5xl); letter-spacing: -0.03em; }
.ds-h1      { font-size: var(--t-4xl); }
.ds-h2      { font-size: var(--t-3xl); }
.ds-h3      { font-size: var(--t-2xl); line-height: var(--lh-snug); }

.ds-h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-default);
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.ds-lead {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: var(--lh-relax);
  color: var(--fg-muted);
  font-weight: var(--weight-regular);
}

.ds-body { font-size: var(--t-base); line-height: var(--lh-normal); color: var(--fg-default); }
.ds-small { font-size: var(--t-sm); color: var(--fg-muted); }
.ds-caption { font-size: var(--t-xs); color: var(--fg-subtle); letter-spacing: 0.01em; }
.ds-mono { font-family: var(--font-mono); font-size: 0.95em; }

.ds-italic { font-style: italic; }
em.ds-emphasis { font-style: italic; color: var(--leaf-700); font-weight: var(--weight-regular); }

/* Convenience surface block */
.ds-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}