/* Tendersmith design tokens: the single source for colour, type, spacing, radius, shadow and motion.
   Loaded first by the app (base.html), the public site (site/_layout.html) and the skill output renderer.
   Templates and stylesheets use these variables; tests/test_ui_design_system.py rejects literal font sizes
   in templates and the product stylesheets. Documented in docs/UI_AUDIT.md. */
:root {
  /* Brand and neutrals (shared by the public site and the app) */
  --color-brand: #1d3b34;          /* dark surfaces: sidebar, site bands, logo tile */
  --color-brand-2: #255a4c;
  --color-primary: #1d5b4f;        /* buttons, links, current step (7.9:1 on white) */
  --color-primary-dark: #154338;   /* hover / pressed */
  --color-primary-soft: #e8f2ee;   /* selected rows, chips */
  --color-primary-line: #b9d6cb;
  --color-accent: #e0a458;         /* logo bar, focus ring on dark surfaces; never text on white */
  --color-accent-ink: #6b4310;
  --color-ink: #14231f;            /* headings and strong text (15.6:1) */
  --color-body: #2f3f3a;           /* body copy */
  --color-muted: #4f5e59;          /* secondary text (6.8:1 on white, 6.4:1 on --color-bg) */
  --color-line: #d9e2df;           /* borders, dividers */
  --color-line-strong: #7d8f88;    /* input borders, outline buttons (3.4:1 non-text contrast) */
  --color-bg: #f7f8f6;             /* app background */
  --color-surface: #ffffff;
  --color-surface-soft: #f1f6f4;   /* table heads, card headers */
  --color-surface-muted: #f4f6f5;
  --color-on-dark: #e6eeeb;
  --color-on-dark-muted: #b7c8c1;

  /* Status (always paired with a text label) */
  --color-success: #24704b; --color-success-soft: #e9f4ee;
  --color-warning: #8a5a12; --color-warning-soft: #fbf3e2;
  --color-danger: #b3372f;  --color-danger-soft: #fbecea;
  --color-info: #22507a;    --color-info-soft: #eaf2fa;
  --color-focus: #1d5b4f;          /* 3px ring + 2px offset on light surfaces */
  --color-focus-on-dark: #e0a458;

  /* Type: one family, one scale (12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 px) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem;    /* badges, table meta only */
  --fs-sm: .875rem;   /* secondary text, labels, table cells, buttons */
  --fs-base: 1rem;    /* body */
  --fs-md: 1.125rem;  /* h3, card titles, lede */
  --fs-lg: 1.25rem;   /* h2, section titles */
  --fs-xl: 1.5rem;    /* stat values, step titles */
  --fs-2xl: 1.875rem; /* h1 page titles */
  --fs-3xl: 2.25rem;  /* marketing h2, big numbers */
  --fs-4xl: 3rem;     /* marketing hero */
  /* Marketing display sizes (public site only): fluid from a 390 px phone to a 1440 px desktop */
  --fs-d1: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);   /* home hero headline */
  --fs-d2: clamp(2rem, 1.4rem + 2.3vw, 3.25rem);      /* home section headlines */
  --fs-d3: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); /* home sub-heads and big figures */
  --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Spacing (4px grid) */
  --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;

  /* Shape and depth */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 35, 31, .05);
  --shadow-md: 0 4px 14px rgba(20, 35, 31, .07);
  --shadow-lg: 0 12px 32px rgba(20, 35, 31, .12);

  /* Controls */
  --control-height: 44px; --control-height-sm: 38px;

  /* Motion */
  --duration: .18s; --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --content-max: 1280px; --sidebar-width: 240px; --page-gutter: 32px;
}
@media (max-width: 768px) { :root { --page-gutter: 16px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0s; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}