/* ============================================================
   AuditEase — Design Tokens
   Direction F / Warm Nordic Editorial
   ============================================================ */

:root {

  /* ── Color: Background ── */
  --color-bg:          #FDFBF7;
  --color-bg-card:     #FFFFFF;
  --color-bg-muted:    #F8F5F0;
  --color-bg-green:    #F2F7F4;  /* completed row tint */
  --color-bg-amber:    #FDF4E7;  /* deadline card */

  /* ── Color: Text ── */
  --color-text-primary:   #1C1C1A;
  --color-text-body:      #3D3D39;
  --color-text-muted:     #7A7A72;
  --color-text-faint:     #B0ADA8;

  /* ── Color: Brand ── */
  --color-green:         #2B4D3F;
  --color-green-hover:   #3D6B59;
  --color-green-light:   #E8F0EC;
  --color-amber:         #C8852A;
  --color-amber-hover:   #A86E1F;
  --color-amber-light:   rgba(200, 133, 42, 0.10);

  /* ── Color: Borders ── */
  --color-border:        #EDE9E3;
  --color-border-medium: #D8D3CB;
  --color-border-green:  rgba(43, 77, 63, 0.11);
  --color-border-amber:  rgba(200, 133, 42, 0.22);

  /* ── Color: Shadows ── */
  --shadow-card:   0 28px 72px rgba(43,77,63,0.13), 0 6px 18px rgba(28,28,26,0.07);
  --shadow-card-hover: 0 36px 90px rgba(43,77,63,0.18), 0 10px 28px rgba(28,28,26,0.10);
  --shadow-small:  0 10px 28px rgba(200,133,42,0.10), 0 2px 6px rgba(28,28,26,0.05);

  /* ── Typography: Families ── */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Mulish', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Typography: Scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* Display scale (word tower) */
  --text-d1: clamp(72px, 9vw, 116px);  /* word tower */
  --text-d2: clamp(40px, 5vw, 64px);   /* section headers */
  --text-d3: clamp(28px, 3.5vw, 40px); /* card titles */

  /* ── Typography: Weights ── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Typography: Line Heights ── */
  --leading-tight:  0.88;
  --leading-snug:   1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── Typography: Tracking ── */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;
  --tracking-widest:    0.18em;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   19px;
  --radius-2xl:  24px;
  --radius-pill: 60px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --ease-spring:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-exp: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sway:    cubic-bezier(0.45, 0, 0.55, 1);

  --duration-fast:   250ms;
  --duration-base:   400ms;
  --duration-slow:   650ms;
  --duration-slower: 1300ms;

  /* ── Layout ── */
  --page-max:    1280px;
  --page-gutter: clamp(24px, 5vw, 80px);
}