/* ============================================================
   Project Drive — Design Tokens
   Single source of truth for color, spacing, type, radius,
   elevation, layout, and motion. Loaded first.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    #FAFAFA;
  --color-bg-panel:     #F4F5F7;
  --color-bg-inverse:   #0B1220;

  /* --- Text --- */
  --color-text-strong:  #0B1220;
  --color-text:         #3A4256;
  --color-text-muted:   #6B7280;
  --color-text-inverse: #FFFFFF;

  /* --- Brand & accent --- */
  --color-brand:        #DC2626;  /* signature red, matches the [7] logo */
  --color-brand-strong: #B91C1C;
  --color-brand-tint:   #FEE2E2;
  --color-accent-warm:  #F59E0B;  /* amber, used sparingly, single-page hits only */

  /* --- Borders --- */
  --color-border:        #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* --- Status --- */
  --color-success: #047857;
  --color-warning: #B45309;
  --color-danger:  #991B1B;  /* deeper red so error states stay distinct from brand */

  /* --- Focus --- */
  --color-focus-ring: rgba(220, 38, 38, 0.35);

  /* --- Spacing (4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- Typography --- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                      "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  2rem;      /* 32 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  clamp(2.5rem, 5.2vw, 4rem);

  --leading-display: 1.05;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px  rgba(11, 18, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.08);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 40px);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;

  /* --- Z-index scale --- */
  --z-nav:   100;
  --z-modal: 200;
}