/* ==========================================================================
   KProcure Flow / Diffs.com Unified Design System Tokens
   ========================================================================== */

:root {
  /* Tier 1: Primitives (Neutral Monochrome Foundation) */
  --primitive-dark-950: #0B0B0B;        /* Page background canvas */
  --primitive-dark-925: #101013;        /* Sidebar & sticky headers (ladder v2) */
  --primitive-dark-900: #171717;        /* Surface & card background */
  --primitive-dark-875: #1C1C1E;        /* Nested cards & table zebra (ladder v2) */
  --primitive-dark-850: #202020;        /* Hover surface & raised elements */
  
  --primitive-border-hairline: #292929; /* Standard 1px divider */
  --primitive-border-strong: #3A3A3A;   /* Active border & input focus */

  /* Alpha borders — overlay, popover & hover-state contexts (Linear pattern).
     The Alpha-Border Rule: translucent white alphas here, never new hex values. */
  --border-alpha-subtle: rgba(255, 255, 255, 0.06);
  --border-alpha-default: rgba(255, 255, 255, 0.10);  /* Linear #ffffff14 equivalent */
  --border-alpha-strong: rgba(255, 255, 255, 0.16);
  
  --primitive-text-primary: #FAFAFA;    /* Primary typography */
  --primitive-text-muted: #A1A1AA;      /* Secondary text */
  --primitive-text-dim: #737373;        /* Labels & metadata */

  /* Unified Brand Accent (Cyan Blue) */
  --primitive-brand-cyan: #38bdf8;
  --primitive-brand-cyan-hover: #0284c7;
  
  /* Fonts */
  --font-family-heading: 'Outfit', sans-serif;
  --font-family-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Data Status Colors ONLY (Never used as ambient decoration) */
  --status-approved: #10B981;
  --status-pending: #F59E0B;
  --status-rejected: #F43F5E;

  /* Semantic status trios (CodeRabbit base/subtle/strong pattern):
     badges, banners & toasts compose from these instead of inline rgba glows. */
  --status-approved-subtle: rgba(16, 185, 129, 0.12);
  --status-approved-border: rgba(16, 185, 129, 0.35);
  --status-pending-subtle: rgba(245, 158, 11, 0.12);
  --status-pending-border: rgba(245, 158, 11, 0.35);
  --status-rejected-subtle: rgba(244, 63, 94, 0.12);
  --status-rejected-border: rgba(244, 63, 94, 0.35);
  --status-purple-subtle: rgba(139, 92, 246, 0.12);
  --status-purple-border: rgba(139, 92, 246, 0.35);

  /* Motion tokens — named easing library + duration scale.
     Interaction transitions use fast durations; reveals use dur-reveal. */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-instant: 100ms;   /* focus rings, pressed states */
  --dur-fast: 150ms;      /* color/bg/border transitions */
  --dur-base: 250ms;      /* dropdowns, popovers */
  --dur-reveal: 480ms;    /* scroll reveals */

  /* Focus ring (accessibility indicator — not a glow halo) */
  --focus-ring-color: rgba(56, 189, 248, 0.12);

  /* Type scale extension (Linear micro/small tiers) */
  --text-micro: 0.6875rem;  /* 11px — table headers, kbd, timestamps */
  --text-small: 0.8125rem;  /* 13px — dense table cells, sidebar items, helpers */

  /* Layout rhythm tokens */
  --page-max-width: 1024px;    /* content pages */
  --hero-max-width: 1344px;    /* landing hero/showcase stage */
  --section-pad-block: 64px;   /* desktop section rhythm; 40px under 768px */
  --header-height: 64px;

  /* Tier 2: Semantic Tokens */
  --color-bg-canvas: var(--primitive-dark-950);
  --color-bg-surface-deep: var(--primitive-dark-925);
  --color-bg-surface: var(--primitive-dark-900);
  --color-bg-surface-nested: var(--primitive-dark-875);
  --color-bg-surface-raised: var(--primitive-dark-850);
  
  --color-border-subtle: var(--primitive-border-hairline);
  --color-border-strong: var(--primitive-border-strong);
  
  --color-text-primary: var(--primitive-text-primary);
  --color-text-secondary: var(--primitive-text-muted);
  --color-text-muted: var(--primitive-text-dim);

  --color-brand-primary: var(--primitive-brand-cyan);
  --color-brand-hover: var(--primitive-brand-cyan-hover);

  /* Tier 3: Component Tokens */
  --btn-radius: 8px;
  --btn-bg-primary: #FAFAFA;
  --btn-text-primary: #111111;
  --btn-bg-secondary: #242424;
  --btn-text-secondary: #FAFAFA;
  --btn-border-secondary: var(--primitive-border-hairline);

  --card-radius: 10px;
  --card-bg: var(--primitive-dark-900);
  --card-border: 1px solid var(--primitive-border-hairline);
}

/* Mobile section rhythm: single token override keeps every consumer in sync */
@media (max-width: 768px) {
  :root {
    --section-pad-block: 40px;
  }
}