/* ============================================================================
   TCC DESIGN SYSTEM — canonical tokens
   "Financial Sophistication" (Stitch) structure + The Company Check brand.
   Single source of truth consumed by tailwind.config.js (via --c-* channels)
   and by the .tcc-* component library / Razor views (via --ds-* hex vars).

   Namespaced --ds-* / --c-* to avoid any collision with the legacy
   --brand-* / --tcc-* / --mega-* / --secx-* variables already in the app.
   ========================================================================== */
:root {
  /* ---- Color channels (R G B) for Tailwind `rgb(var(--c-x) / <alpha-value>)` ---- */
  --c-primary:        5 28 56;      /* #051c38  TCC navy   (Stitch near-black -> TCC) */
  --c-primary-700:    8 38 74;      /* #08264a  navy hover/lighter */
  --c-accent:         29 80 128;    /* #1d5080  TCC blue    (links / interactive)     */
  --c-accent-alt:     37 99 235;    /* #2563eb  bright blue (secondary accent)        */
  --c-cta:            255 193 7;    /* #ffc107  TCC yellow  (primary CTA)             */
  --c-cta-700:        224 168 0;    /* #e0a800  CTA hover */

  --c-surface-page:   247 249 251;  /* #f7f9fb  page background */
  --c-surface-card:   255 255 255;  /* #ffffff  card / container */
  --c-surface-muted:  242 244 246;  /* #f2f4f6  hover fill / table head tint */
  --c-surface-sunken: 236 238 240;  /* #eceef0  deeper fill */

  --c-border:         226 232 240;  /* #e2e8f0  ghost border */
  --c-border-strong:  203 213 225;  /* #cbd5e1  emphasized border */

  --c-ink:            25 28 30;     /* #191c1e  primary text */
  --c-ink-soft:       51 65 85;     /* #334155  body text */
  --c-muted:          100 116 139;  /* #64748b  secondary / label text */
  --c-faint:          148 163 184;  /* #94a3b8  placeholder / disabled */

  --c-positive:       16 185 129;   /* #10b981  up-trend / verified */
  --c-warning:        245 158 11;   /* #f59e0b  caution */
  --c-negative:       185 28 28;    /* #b91c1c  loss / error */
  --c-info:           59 130 246;   /* #3b82f6  info */

  /* ---- Hex convenience (plain CSS / Razor inline) ---- */
  --ds-primary:        #051c38;
  --ds-primary-700:    #08264a;
  --ds-accent:         #1d5080;
  --ds-accent-alt:     #2563eb;
  --ds-cta:            #ffc107;
  --ds-cta-700:        #e0a800;
  --ds-on-primary:     #ffffff;
  --ds-on-cta:         #051c38;

  --ds-surface-page:   #f7f9fb;
  --ds-surface-card:   #ffffff;
  --ds-surface-muted:  #f2f4f6;
  --ds-surface-sunken: #eceef0;

  --ds-border:         #e2e8f0;
  --ds-border-strong:  #cbd5e1;

  --ds-ink:            #191c1e;
  --ds-ink-soft:       #334155;
  --ds-muted:          #64748b;
  --ds-faint:          #94a3b8;

  --ds-positive:       #10b981;
  --ds-warning:        #f59e0b;
  --ds-negative:       #b91c1c;
  --ds-info:           #3b82f6;

  /* ---- Typography ---- */
  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Radius (Stitch "Soft 0.25rem") ---- */
  --ds-radius-sm:   0.25rem;  /* 4px  buttons, inputs, chips */
  --ds-radius:      0.5rem;   /* 8px  cards, containers */
  --ds-radius-lg:   0.75rem;  /* 12px large panels */
  --ds-radius-full: 9999px;   /* avatars / pills */

  /* ---- Spacing scale (8px base) ---- */
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-gutter:   24px;
  --ds-space-lg: 32px;
  --ds-space-xl: 40px;

  /* ---- Elevation: tonal layers, ambient (not floaty) ---- */
  --ds-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-ambient: 0 10px 15px -3px rgba(15, 23, 42, 0.05);
  --ds-shadow-pop:     0 12px 32px rgba(15, 23, 42, 0.10);

  /* ---- Layout ---- */
  --ds-container: 1440px;
  --ds-sidebar:   280px;
  --ds-header-h:  64px;

  /* ---- Motion ---- */
  --ds-transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
}