/* ConveySure design tokens — the single shared token source for the
   authenticated application shell (Phase 7.1). Linked from base.html and any
   template that extends it. Fonts are self-hosted: the app CSP is
   default-src 'self', so they must not come from a CDN (Phase 7.6). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/static/fonts/playfair-var-latin.woff2") format("woff2");
}
/* Some auth and client-portal templates historically requested "DM Sans" from a
   CDN. Alias it to the self-hosted Inter face so those surfaces render in the
   one interface typeface (Phase 7.4) with no external font dependency. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2");
}

    :root {
  /* Brand */
  --brand-900: #1c0f08;
  --brand-800: #2e1a0e;
  --brand-700: #5a2d13;
  --brand-600: #7a3e1a;
  --brand-500: #9a5228;
  --brand-100: #f5ede6;
  --brand-075: #faf2eb;
  --brand-050: #fdf8f4;

      
  /* Neutral warm system */
  --bg: #fdf8f4;
  --bg-soft: #faf2eb;
  --surface: #ffffff;
  --surface-soft: #fafaf8;
  --border: #e8ddd4;
  --border-soft: rgba(122, 62, 26, .12);

  /* Text */
  --text: #1c0f08;
  --text-soft: #2e1a0e;
  --muted: #6b5040;
  --muted-light: #9a7a68;

  /* Status colours */
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #166534;

  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #92400e;

  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;

  /* Replace old blue information panels with warm neutral info */
  --info-bg: #f5ede6;
  --info-border: #e8ddd4;
  --info-text: #5a2d13;

  /* Semantic status system
     green  = genuinely complete / accepted / verified
     amber  = review or further action required
     red    = blocker, failed control, escalation
     blue   = processing or system-generated information
     purple = AI-generated / intelligence-assisted (needs human confirmation)
     grey   = not started / unavailable / not applicable */
  --processing-bg: #eff6ff;
  --processing-border: #bfdbfe;
  --processing-text: #1d4ed8;

  --ai-bg: #f5f3ff;
  --ai-border: #ddd6fe;
  --ai-text: #5b21b6;

  --neutral-bg: #f3f4f6;
  --neutral-border: #e5e7eb;
  --neutral-text: #6b7280;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 4px rgba(28, 15, 8, .05);
  --shadow-md: 0 4px 18px rgba(28, 15, 8, .08);

  /* ── Authenticated workspace spacing system ──
     One shared spacing scale for the operational pages (Dashboard, Matter
     Overview, Source Review, Matter directory, Funds calculation). Card gaps are
     controlled by the *parent* stack/grid — cards do not carry external margins.
     Values align with the rem --space-* scale (4/8/12/16/20/24 px at the 16px
     root) and are expressed in px here so the spacing contract is unambiguous.
     Do not introduce arbitrary neighbouring values (10/14/18/22px) without a
     documented component-specific reason. */
  --workspace-gap-xs: 4px;
  --workspace-gap-sm: 8px;
  --workspace-gap-md: 12px;
  --workspace-gap-lg: 16px;
  --workspace-gap-xl: 20px;
  --workspace-gap-2xl: 24px;

  --workspace-card-padding: 16px;
  --workspace-card-padding-large: 20px;
  --workspace-card-radius: 14px;
  --workspace-section-gap: 20px;   /* gap between major page sections */
  --workspace-grid-gap: 16px;      /* gap between cards in one grid */

  /* ── Layout widths ──
     app: complex operational workspaces; content: ordinary pages;
     reading: long-form copy; form: focused single-column forms. */
  --app-max-width: 90rem;
  --content-max-width: 78rem;
  --reading-max-width: 46rem;
  --form-max-width: 42rem;

  /* ── Page padding ── */
  --page-inline-desktop: 2rem;
  --page-inline-tablet: 1.5rem;
  --page-inline-mobile: 1rem;
  --page-top-desktop: 1.75rem;
  --page-bottom-desktop: 4rem;
  --page-top-mobile: 1.25rem;
  --page-bottom-mobile: 3rem;
  --page-padding: var(--page-inline-desktop);

  /* ── Spacing scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Authenticated typography scale ── */
  --font-page-title: clamp(2rem, 3vw, 2.625rem);
  --font-section-title: clamp(1.35rem, 2vw, 1.75rem);
  --font-panel-title: 1.0625rem;
  --font-body-large: 1rem;
  --font-body: 0.9375rem;
  --font-small: 0.8125rem;
  --font-micro: 0.75rem;

  /* ── Typefaces ──
     Serif is reserved for display headings and premium report titles;
     Inter carries all operational UI (tables, forms, metadata, status). */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-interface: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── Semantic surface / text / border / brand tokens ── */
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-subtle: var(--surface-soft);
  --surface-warm: var(--bg-soft);
  --surface-emphasis: var(--brand-100);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted-light);
  --text-inverse: #ffffff;
  --border-default: var(--border);
  --border-strong: var(--brand-600);
  --brand-primary: var(--brand-600);
  --brand-hover: var(--brand-700);
  --brand-accent: #c9a84c;

  /* ── Semantic status tokens (always paired with text or an icon) ── */
  --status-success: var(--success-text);
  --status-success-bg: var(--success-bg);
  --status-warning: var(--warning-text);
  --status-warning-bg: var(--warning-bg);
  --status-danger: var(--danger-text);
  --status-danger-bg: var(--danger-bg);
  --status-info: var(--processing-text);
  --status-info-bg: var(--processing-bg);
  --status-neutral: var(--neutral-text);
  --status-neutral-bg: var(--neutral-bg);

  --navy: #1c0f08;
  --gold: #c9a84c;
  --gold-dark: #b89535;

  /* ── Primary interaction anchor ──
     ConveySure's authenticated shell keeps its warm identity: a warm-brown
     operational anchor for primary actions, active navigation and selected
     states, with gold retained as the accent (e.g. active-tab underlines and
     prominent call-to-action buttons). The earlier navy redesign is reverted;
     these token names are preserved so no template has to change, but they now
     resolve to the warm brand palette. Contrast on --surface-page ≥ 7:1. */
  --trust: var(--brand-600);       /* #7a3e1a warm brown */
  --trust-hover: var(--brand-700); /* #5a2d13 */
  --trust-soft: var(--brand-100);  /* #f5ede6 warm cream */
  --action-primary: var(--trust);
  --action-primary-hover: var(--trust-hover);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);

  /* ── Authenticated operational colour system ──
     The employee-facing application shell and its workspaces stay on the warm
     ConveySure palette: cream/off-white surfaces, warm borders, warm-brown
     text and a warm-brown primary. (The navy/neutral variant from the earlier
     redesign is reverted; the --app-* names remain so the shell templates,
     matter directory, funding and activity workspaces need no edits.) */
  --app-page: var(--bg);                       /* #fdf8f4 warm cream */
  --app-surface: var(--surface);               /* #ffffff */
  --app-surface-subtle: var(--surface-soft);   /* #fafaf8 */
  --app-border: var(--border);                 /* #e8ddd4 warm border */
  --app-border-strong: #d8c7b8;                /* warm mid border */

  --app-text: var(--text);                     /* #1c0f08 warm brown */
  --app-text-secondary: var(--muted);          /* #6b5040 */
  --app-text-muted: var(--muted-light);        /* #9a7a68 */

  --app-primary: var(--brand-600);             /* #7a3e1a warm brown */
  --app-primary-hover: var(--brand-700);       /* #5a2d13 */
  --app-primary-soft: var(--brand-100);        /* #f5ede6 warm cream */
  --app-primary-contrast: #ffffff;
  --app-accent: var(--gold);

  /* Compatibility aliases used by agent templates */
  --color-background-secondary: var(--surface-soft);
  --color-background-success: var(--success-bg);
  --color-background-warning: var(--warning-bg);
  --color-background-danger: var(--danger-bg);
  --color-background-info: var(--info-bg);

  --color-border-tertiary: var(--border);
  --color-border-warning: var(--warning-border);
  --color-border-danger: var(--danger-border);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--muted);
  --color-text-tertiary: var(--muted-light);
  --color-text-success: var(--success-text);
  --color-text-warning: var(--warning-text);
  --color-text-danger: var(--danger-text);
  --color-text-info: var(--info-text);
    }