/* CLM One "Casefile" design system. Precise, authoritative, and optimized
   for contract operations: deep-navy foundation, cobalt action, teal
   support, warm-neutral workspace, and archival status pills. */

:root {
  /* ── Brand palette — the source of truth for the rebrand. Everything
        below (forest/copper/seal aliases, ds-* tokens, inline base.html
        vars) resolves back to these. Deep navy foundation, cobalt action,
        teal support. ──────────────────────────────────────────────── */
  --color-brand-foundation: #0B1728;       /* Deep Navy — shell, nav, top-level headers */
  --color-brand-foundation-raised: #14213A; /* hover/raised panels within the navy shell */
  --color-brand-foundation-border: rgba(255, 255, 255, 0.08);
  --color-brand-primary: #168C8C;          /* Teal-green — primary action */
  --color-brand-primary-hover: #12706F;
  --color-brand-primary-pressed: #0E5B5A;
  --color-brand-primary-subtle: #E3F5F4;   /* light selected background */
  --color-brand-primary-disabled: #8AC6C4; /* desaturated teal, reduced contrast by design */
  --color-interaction-secondary: #168C8C;  /* Teal — secondary interaction & navigation */
  --color-interaction-secondary-hover: #12706F;
  --color-interaction-secondary-subtle: #E3F5F4;
  --color-surface-page: #F7F9FC;           /* Cool operational canvas — workspace background */
  --color-surface-card: #FFFFFF;           /* cards, modals, form panels, tables */
  --color-surface-canvas-cool: #F7F9FC;    /* expressive dashboards and command surfaces */
  --color-surface-soft: #F3F6F8;           /* setup rows and low-emphasis grouped actions */
  --color-surface-soft-hover: #EBF3F7;
  --color-text-secondary: #667085;         /* Slate Text */
  --color-border-default: #DCE2E8;         /* Border Grey */
  --color-border-soft: rgba(117, 135, 158, 0.18);
  --color-border-soft-muted: rgba(117, 135, 158, 0.14);
  --color-status-success: #27865B;
  --color-status-warning: #D99A2B;
  --color-status-error: #C4423D;
  --color-status-info: #3478C7;

  /* Semantic outlines are part of the status vocabulary. Components must
     pair these with the matching foreground/background role instead of
     inventing a page-local tint. */
  --color-status-success-border: #B9DFCE;
  --color-status-warning-border: #ECD8B3;
  --color-status-error-border: #EACAC7;
  --color-status-info-border: #CAD8EB;
  --color-status-special-border: #DED2E7;
  --color-status-neutral-border: #CDD2D8;

  /* Shared low-emphasis interaction surfaces. */
  --color-surface-card-hover: #FBFCFE;
  --color-surface-table-head: #FAFBFB;
  --color-surface-action-hover: #F7FBFA;

  /* Selected controls use one semantic treatment across tabs, filters,
     saved views, and segmented controls. Navigation chrome and data-row
     selection remain separate interaction patterns. */
  --color-control-selected-bg: var(--color-brand-primary-subtle);
  --color-control-selected-border: var(--color-brand-primary);
  --color-control-selected-text: var(--color-brand-primary-hover);
  --color-control-selected-marker: var(--color-brand-primary);

  /* Expressive workspace palette. These roles support feature surfaces,
     command dashboards, and setup guidance; they are not workflow status
     colours and must not replace the semantic status vocabulary below. */
  --color-shell-deep: #111827;
  --color-shell-raised: #1A2740;
  --color-shell-accent: #22B8E9;
  --color-shell-callout-border: rgba(91, 163, 255, 0.16);
  --color-feature-cyan: #0CB2E3;
  --color-feature-blue: #078EDC;
  --color-feature-cobalt: #0870D5;
  --color-feature-deep: #0B59C6;
  --color-feature-ring: #076FD3;
  --color-feature-action: #0879A9;
  --color-feature-action-soft: #EEF8FB;
  --color-feature-icon-soft: #E1F2F7;
  --color-state-clear: #1C7D67;
  --color-state-clear-dot: #3CC18F;
  --color-state-clear-soft: rgba(60, 193, 143, 0.11);
  --color-state-ready-dot: #78E3AE;
  --color-state-next-dot: #FFD37D;

  /* Composite fills are tokens because every consumer must preserve the
     same brand direction and contrast stops. */
  --gradient-feature: radial-gradient(circle at 76% 4%, rgba(30, 45, 203, 0.72) 0 18%, transparent 42%), linear-gradient(118deg, var(--color-feature-cyan) 0%, var(--color-feature-blue) 43%, var(--color-feature-cobalt) 70%, var(--color-feature-deep) 100%);
  --gradient-feature-clear: radial-gradient(circle at 78% 5%, rgba(24, 41, 196, 0.66) 0 16%, transparent 40%), linear-gradient(118deg, var(--color-feature-cyan) 0%, var(--color-feature-blue) 45%, var(--color-feature-cobalt) 72%, var(--color-feature-deep) 100%);
  /* A calmer feature treatment for information-dense operational surfaces.
     The cyan stop is mixed ten percent toward the adjacent blue role rather
     than introducing a page-owned colour. */
  --gradient-feature-calm: radial-gradient(circle at 76% 4%, rgba(30, 45, 203, 0.72) 0 18%, transparent 42%), linear-gradient(118deg, color-mix(in srgb, var(--color-feature-cyan) 90%, var(--color-feature-blue)) 0%, var(--color-feature-blue) 43%, var(--color-feature-cobalt) 70%, var(--color-feature-deep) 100%);
  --gradient-feature-clear-calm: radial-gradient(circle at 78% 5%, rgba(24, 41, 196, 0.66) 0 16%, transparent 40%), linear-gradient(118deg, color-mix(in srgb, var(--color-feature-cyan) 90%, var(--color-feature-blue)) 0%, var(--color-feature-blue) 45%, var(--color-feature-cobalt) 72%, var(--color-feature-deep) 100%);
  --gradient-shell-callout: linear-gradient(145deg, #172541, #111E34);
  --gradient-avatar-expressive: linear-gradient(145deg, #18A9E6, #1B67D9);
  --gradient-action-blue: linear-gradient(105deg, #087ED1, #0CA8DF);

  /* Brand and semantic primitives. */
  --clmone-deep-navy: #0B1728;
  --clmone-navy: #14213A;
  --clmone-teal: #168C8C;
  --clmone-white: #FFFFFF;
  --clmone-light-gray: var(--color-surface-page);
  --clmone-font: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Teal-green is the primary action, selection, progress, and trust signal.
     Named "forest" for template-compatibility. */
  --casefile-forest-700: var(--color-brand-primary-hover);
  --casefile-forest-600: var(--color-brand-primary);
  --casefile-forest-500: var(--color-brand-primary);
  --casefile-forest-100: #C6E9E8;
  --casefile-forest-50: var(--color-brand-primary-subtle);
  --casefile-teal-700: var(--color-interaction-secondary-hover);
  --casefile-teal-600: var(--color-interaction-secondary);
  --casefile-teal-50: var(--color-interaction-secondary-subtle);
  --casefile-blue-700: #2A5FA0;
  --casefile-blue-600: var(--color-status-info);
  --casefile-blue-100: #D3E3F5;
  --casefile-blue-50: #E9F1FB;
  --casefile-amber-700: #A76500;
  --casefile-amber-600: var(--color-status-warning);
  --casefile-amber-50: #FBF1DE;
  --casefile-red-700: #A8342F;
  --casefile-red-600: var(--color-status-error);
  --casefile-red-50: #FBEAE9;
  --casefile-success-700: #1F6E49;
  --casefile-success-600: var(--color-status-success);
  --casefile-success-50: #E7F4EE;
  --casefile-plum-700: #654978;
  --casefile-plum-600: #765B8C;
  --casefile-plum-50: #F3EFF7;

  /* Logo sizing (existing, unchanged) */
  --clmone-logo-header-height: 40px;
  --clmone-logo-mobile-height: 32px;
  --clmone-mark-size: 36px;

  /* ── Ink ramp — navy-undertoned text & line colors.
        Replaces every gray-* / slate-* usage. ─────────────────────── */
  --ink-900: #171A1F;
  --ink-700: #353A42;
  --ink-600: #4B525C;
  --ink-500: var(--color-text-secondary);
  --ink-400: #8B929C;
  --ink-300: #B4BAC1;
  /* Compatibility ramp stops still referenced by legacy workflow and upload
     surfaces. Keep these canonical rather than allowing an undefined custom
     property to invalidate a colour or background declaration. */
  --ink-200: #D7DCE1;
  --ink-800: #252A31;
  --line-strong: #CDD2D8;
  --line: var(--color-border-default);
  --hairline: #ECEEF0;
  --paper: var(--color-surface-page);
  --card: var(--color-surface-card); /* raised working surfaces */
  --well: #F0F2F3;
  --shell: #FAFBFB;

  /* Legacy CTA aliases retained for template compatibility. */
  --copper-600: var(--color-brand-primary);
  --copper-700: var(--color-brand-primary);
  --copper-800: var(--color-brand-primary-hover);
  --copper-500: var(--color-brand-primary);
  --copper-400: #42A5A5;
  --copper-tint: var(--color-brand-primary-subtle);
  --copper-tint-dark: rgba(22, 140, 140, 0.14);

  /* Teal-green is the primary action, selection, progress, and trust signal. */
  --seal: var(--color-brand-primary);
  --seal-dark: var(--color-brand-primary-hover);
  --seal-bg: var(--color-brand-primary-subtle);
  --focus-ring: rgba(22, 140, 140, 0.28);
  --seal-bg-dark: rgba(22, 140, 140, 0.14);

  /* ── Status vocabulary — archival, desaturated, tinted-pill pairs.
        (bg = tint, fg = text) Never raw saturated hues. Semantic only:
        never reused for brand/decorative purposes. ───────────────── */
  --status-positive-fg: var(--casefile-success-700);
  --status-positive-bg: var(--casefile-success-50);
  --status-pending-fg: var(--casefile-amber-700);
  --status-pending-bg: var(--casefile-amber-50);
  --status-progress-fg: var(--casefile-blue-700);
  --status-progress-bg: var(--casefile-blue-50);
  --status-danger-fg: var(--casefile-red-700);
  --status-danger-bg: var(--casefile-red-50);
  --status-neutral-fg: var(--ink-500);
  --status-neutral-bg: #EEF0F2;
  --status-special-fg: var(--casefile-plum-700);
  --status-special-bg: var(--casefile-plum-50);

  /* Numeric and tabular content uses stable, comparable figures. */
  --money-font-feature: "tnum" 1, "lnum" 1;    /* tabular numerals, always */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ledger-rule: var(--ink-300);        /* single rule above totals */
  --ledger-rule-final: var(--ink-400);  /* double rule under final totals */
  --debit: var(--status-danger-fg);
  --credit: var(--status-positive-fg);

  /* ── Type scale — Inter only. Weights 400/500/600, display 650.
        No 700+ in product chrome; authority comes from spacing and
        ink, not boldness. ─────────────────────────────────────────── */
  --font-sans: var(--clmone-font);
  --text-display: 650 24px/32px var(--font-sans);
  --text-title: 650 22px/28px var(--font-sans);
  --text-section: 650 18px/24px var(--font-sans);
  --text-heading: 600 15px/22px var(--font-sans);   /* panel titles */
  --text-subheading: 600 14px/20px var(--font-sans);
  --text-body: 400 14px/22px var(--font-sans);
  --text-small: 400 13px/18px var(--font-sans);
  --text-meta: 400 12px/16px var(--font-sans);      /* letter-spacing -0.01em */
  --text-eyebrow: 600 11px/16px var(--mono);        /* uppercase, +0.14em */
  --text-data: 400 13px/20px var(--font-sans);      /* table cells, tnum */

  /* Atomic typography values for compatibility APIs and CSS properties that
     cannot consume the font shorthand tokens above. */
  --font-size-eyebrow: 11px;
  --font-size-meta: 12px;
  --font-size-small: 13px;
  --font-size-body: 14px;
  --font-size-heading: 15px;
  --font-size-section: 18px;
  --font-size-title: 22px;
  --font-size-display: 24px;
  --line-height-tight: 1.2;
  --line-height-base: 1.45;

  /* Canonical spacing scale from the CMS case-study foundation. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  --grid-columns: 12;
  --grid-margin: 24px;
  --grid-gutter: 16px;
  --page-max-width: 1480px;
  --page-padding-x: var(--space-24);
  --page-padding-top: var(--space-16);
  --page-padding-bottom: var(--space-40);
  --control-height: 36px;
  --shell-topbar-height: 72px;

  /* ── Shape — borders over shadows; precision over softness. ─────── */
  --radius-sm: 4px;
  --radius-control: 6px;   /* buttons, inputs, selects */
  --radius-card: 8px;
  --radius-panel: 8px;
  --radius-action: 8px;  /* prominent actions on expressive surfaces */
  --radius-subpanel: 10px;
  --radius-surface: 12px; /* spacious dashboard and context surfaces */
  --radius-premium-card: var(--space-16); /* shared launch, catalog, and operational cards */
  --radius-feature: 12px; /* branded feature surfaces */
  --radius-pill: 999px;    /* status pills and people chips ONLY */

  /* ── Elevation — ink-tinted, overlays only. Working surfaces use
        1px borders, never drop shadows. ──────────────────────────── */
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-card-subtle: 0 1px 2px rgba(35, 55, 82, 0.04);
  --shadow-surface-expressive: 0 12px 34px rgba(35, 55, 82, 0.065);
  --shadow-feature: 0 18px 42px rgba(10, 114, 202, 0.22);
  --shadow-feature-clear: 0 18px 42px rgba(10, 114, 202, 0.20);
  --shadow-shell-edge: 14px 0 36px rgba(10, 24, 48, 0.08);
  --shadow-shell-callout: 0 18px 34px rgba(2, 12, 29, 0.22);
  --shadow-action-on-feature: 0 10px 24px rgba(3, 53, 123, 0.20);
  --shadow-avatar-expressive: 0 10px 22px rgba(12, 126, 217, 0.34);
  --shadow-overlay: 0 12px 32px rgba(23, 26, 31, 0.12), 0 2px 8px rgba(23, 26, 31, 0.06);
  --shadow-drawer: -16px 0 40px rgba(11, 19, 48, 0.12);

  /* ── Motion ──────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);

  /* Spacious operational shell dimensions. Compact workspaces may retain
     their existing widths; these values are for command/dashboard layouts. */
  --shell-sidebar-width-spacious: 256px;
  --context-rail-width-spacious: 352px;
  --feature-surface-min-height: 336px;

  /* Data visualization palette. Charts are semantic consumers of the same
     brand and status vocabulary, not a separate colour system. */
  --chart-1: var(--seal);
  --chart-2: var(--color-status-info);
  --chart-3: var(--color-status-warning);
  --chart-4: var(--casefile-plum-600);
  --chart-5: var(--color-status-error);
  --chart-grid: var(--line);
  --chart-axis: var(--ink-500);

  /* ── Deprecated design-system adapter aliases ───────────────────
     Existing .dc-ds-* and compatibility consumers still use --ds-* names.
     These aliases remain functional until repository-wide usage reaches
     zero. New code must use the canonical token named on each line. */
  --ds-color-shell: var(--shell); /* deprecated: use --shell */
  --ds-color-shell-border: var(--line); /* deprecated: use --line */
  --ds-color-canvas: var(--paper); /* deprecated: use --paper */
  --ds-color-surface: var(--card); /* deprecated: use --card */
  --ds-color-surface-muted: var(--well); /* deprecated: use --well */
  --ds-color-surface-raised: var(--card); /* deprecated: use --card */
  --ds-color-border: var(--line); /* deprecated: use --line */
  --ds-color-border-strong: var(--line-strong); /* deprecated: use --line-strong */
  --ds-color-text: var(--ink-900); /* deprecated: use --ink-900 */
  --ds-color-text-secondary: var(--ink-500); /* deprecated: use --ink-500 */
  --ds-color-text-muted: var(--ink-400); /* deprecated: use --ink-400 */
  --ds-color-trust: var(--seal); /* deprecated: use --seal */
  --ds-color-trust-hover: var(--seal-dark); /* deprecated: use --seal-dark */
  --ds-color-trust-soft: var(--seal-bg); /* deprecated: use --seal-bg */
  --ds-color-action: var(--seal); /* deprecated: use --seal */
  --ds-color-action-hover: var(--seal-dark); /* deprecated: use --seal-dark */
  --ds-color-action-soft: var(--seal-bg); /* deprecated: use --seal-bg */
  --ds-color-progress: var(--status-progress-fg); /* deprecated: use --status-progress-fg */
  --ds-color-progress-soft: var(--status-progress-bg); /* deprecated: use --status-progress-bg */
  --ds-color-attention: var(--status-pending-fg); /* deprecated: use --status-pending-fg */
  --ds-color-attention-soft: var(--status-pending-bg); /* deprecated: use --status-pending-bg */
  --ds-color-danger: var(--status-danger-fg); /* deprecated: use --status-danger-fg */
  --ds-color-danger-soft: var(--status-danger-bg); /* deprecated: use --status-danger-bg */
  --ds-color-special: var(--status-special-fg); /* deprecated: use --status-special-fg */
  --ds-color-special-soft: var(--status-special-bg); /* deprecated: use --status-special-bg */
  --ds-color-success: var(--status-positive-fg); /* deprecated: use --status-positive-fg */
  --ds-color-success-soft: var(--status-positive-bg); /* deprecated: use --status-positive-bg */
  --ds-font-sans: var(--font-sans); /* deprecated: use --font-sans */
  --ds-font-serif: var(--font-sans); /* deprecated: product UI uses --font-sans */
  --ds-text-xs: var(--font-size-eyebrow); /* deprecated: use --font-size-eyebrow */
  --ds-text-sm: var(--font-size-meta); /* deprecated: use --font-size-meta */
  --ds-text-md: var(--font-size-body); /* deprecated: use --font-size-body */
  --ds-text-lg: var(--font-size-heading); /* deprecated: use --font-size-heading */
  --ds-text-xl: var(--font-size-section); /* deprecated: use --font-size-section */
  --ds-text-title: var(--font-size-display); /* deprecated: use --font-size-display */
  --ds-line-tight: var(--line-height-tight); /* deprecated: use --line-height-tight */
  --ds-line-base: var(--line-height-base); /* deprecated: use --line-height-base */
  --ds-space-1: var(--space-4); /* deprecated: use --space-4 */
  --ds-space-2: var(--space-8); /* deprecated: use --space-8 */
  --ds-space-3: var(--space-12); /* deprecated: use --space-12 */
  --ds-space-4: var(--space-16); /* deprecated: use --space-16 */
  --ds-space-5: var(--space-20); /* deprecated: use --space-20 */
  --ds-space-6: var(--space-24); /* deprecated: use --space-24 */
  --ds-space-8: var(--space-32); /* deprecated: use --space-32 */
  --ds-space-10: var(--space-40); /* deprecated: use --space-40 */
  --ds-space-16: var(--space-64); /* deprecated: use --space-64 */
  --ds-space-20: var(--space-80); /* deprecated: use --space-80 */
  --ds-space-24: var(--space-96); /* deprecated: use --space-96 */
  --ds-space-30: var(--space-120); /* deprecated: use --space-120 */
  --ds-grid-columns: var(--grid-columns); /* deprecated: use --grid-columns */
  --ds-grid-margin: var(--grid-margin); /* deprecated: use --grid-margin */
  --ds-grid-gutter: var(--grid-gutter); /* deprecated: use --grid-gutter */
  --ds-radius-sm: var(--radius-sm); /* deprecated: use --radius-sm */
  --ds-radius-md: var(--radius-control); /* deprecated: use --radius-control */
  --ds-radius-lg: var(--radius-card); /* deprecated: use --radius-card */
  --ds-radius-pill: var(--radius-pill); /* deprecated: use --radius-pill */
  --ds-shadow-hairline: var(--shadow-card); /* deprecated: use --shadow-card */
  --ds-focus-ring: 0 0 0 3px var(--focus-ring); /* deprecated: use --focus-ring */
  --ds-motion-fast: var(--duration-fast); /* deprecated: use --duration-fast */
  --ds-motion-base: var(--duration-base); /* deprecated: use --duration-base */
  --ds-motion-slow: var(--duration-slow); /* deprecated: use --duration-slow */
  --ds-ease-standard: var(--ease-standard); /* deprecated: use --ease-standard */
  --ds-chart-1: var(--chart-1); /* deprecated: use --chart-1 */
  --ds-chart-2: var(--chart-2); /* deprecated: use --chart-2 */
  --ds-chart-3: var(--chart-3); /* deprecated: use --chart-3 */
  --ds-chart-4: var(--chart-4); /* deprecated: use --chart-4 */
  --ds-chart-5: var(--chart-5); /* deprecated: use --chart-5 */
  --ds-chart-grid: var(--chart-grid); /* deprecated: use --chart-grid */
  --ds-chart-axis: var(--chart-axis); /* deprecated: use --chart-axis */
  --ds-page-max: var(--page-max-width); /* deprecated: use --page-max-width */
  --ds-page-x: var(--page-padding-x); /* deprecated: use --page-padding-x */
  --ds-page-top: var(--page-padding-top); /* deprecated: use --page-padding-top */
  --ds-page-bottom: var(--page-padding-bottom); /* deprecated: use --page-padding-bottom */
  --ds-control-height: var(--control-height); /* deprecated: use --control-height */
  --ds-surface-shadow: var(--shadow-card); /* deprecated: use --shadow-card */
  --ds-surface-shadow-hover: var(--shadow-card-hover); /* deprecated: use --shadow-card-hover */
}