/* Ali Shawky — Webfonts
   Loaded from Google Fonts CDN. Poppins (display/wordmark) + Montserrat (text) are
   the brand's chosen faces; JetBrains Mono carries technical/label detail.
   NOTE: fonts stream from Google's CDN — no local binaries are bundled. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Ali Shawky — Color System
   Direction: "Ivory & Ink" — warm ivory paper, ink-black type, crimson accent.
   Print-first, editorial, monochrome base with a single confident pop color. */
:root{
  /* ---- Base neutrals: warm ivory paper → ink ---- */
  --paper:        #f6f4ef; /* page background — warm ivory */
  --paper-sunk:   #efece4; /* recessed panels, table zebra */
  --surface:      #ffffff; /* cards, invoices, raised surfaces */
  --ink:          #16151a; /* primary text — near-black, warm */
  --ink-2:        #3a3833; /* strong secondary text */
  --ink-3:        #6b6860; /* muted text, captions */
  --ink-4:        #a8a49a; /* faint text, placeholders */
  --line:         #e4e0d7; /* hairline borders */
  --line-strong:  #d3cec2; /* emphasized dividers */

  /* ---- Accent: editorial crimson ---- */
  --crimson:      #e23744; /* primary accent */
  --crimson-deep: #c22230; /* hover / pressed / print-safe */
  --crimson-soft: #fbe4e6; /* accent wash / tint fill */
  --crimson-line: #f2b8be; /* accent hairline on tints */

  /* ---- Ink surface (for decks / dark moments) ---- */
  --ink-bg:       #16151a; /* dark background */
  --ink-surface:  #1f1e22; /* raised on dark */
  --ink-line:     #2f2d31; /* border on dark */
  --on-ink:       #f2f0ea; /* text on dark */
  --on-ink-muted: #a29e94; /* muted text on dark */

  /* ---- Semantic ---- */
  --success:      #1f9d6b; /* growth / paid / positive delta */
  --success-soft: #e2f4ec;
  --warning:      #c98a1e; /* attention / pending */
  --warning-soft: #f7edd8;
  --danger:       #d23b3b; /* overdue / negative */
  --danger-soft:  #fbe6e6;
  --info:         #2f7ea8; /* neutral notice */
  --info-soft:    #e4eef4;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page:      var(--paper);
  --bg-card:      var(--surface);
  --bg-sunk:      var(--paper-sunk);
  --text-strong:  var(--ink);
  --text-body:    var(--ink-2);
  --text-muted:   var(--ink-3);
  --text-faint:   var(--ink-4);
  --text-accent:  var(--crimson-deep);
  --border-hair:  var(--line);
  --border-bold:  var(--line-strong);
  --accent:       var(--crimson);
  --accent-hover: var(--crimson-deep);
  --accent-tint:  var(--crimson-soft);
}
/* Ali Shawky — Typography
   Poppins = display & wordmark (geometric, confident).
   Montserrat = body & UI text (editorial, legible).
   JetBrains Mono = labels, figures, invoice numbers, eyebrows. */
:root{
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-text:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, tuned for docs + decks */
  --fs-eyebrow: 12px;
  --fs-caption: 12.5px;
  --fs-small:   13.5px;
  --fs-body:    15px;
  --fs-lead:    18px;
  --fs-h5:      20px;
  --fs-h4:      24px;
  --fs-h3:      31px;
  --fs-h2:      40px;
  --fs-h1:      52px;
  --fs-display: 68px;

  /* Weights */
  --w-light:   300; /* @kind other */
  --w-regular: 400; /* @kind other */
  --w-medium:  500; /* @kind other */
  --w-semi:    600; /* @kind other */
  --w-bold:    700; /* @kind other */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-eyebrow: 0.28em; /* @kind other */
  --ls-label:   0.14em; /* @kind other */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-snug:   -0.01em; /* @kind other */
  --ls-normal:  0; /* @kind other */
}
/* Ali Shawky — Spacing & Layout
   8px base rhythm with a 4px half-step for dense financial tables. */
:root{
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Document geometry */
  --doc-page-w:   816px;  /* US Letter @96dpi */
  --doc-margin:   64px;
  --content-max:  1120px;
  --gutter:       32px;
}
/* Ali Shawky — Radius, Shadow, Borders, Motion
   Editorial = restrained. Small radii, soft low shadows, hairline borders. */
:root{
  /* Corner radii — tight & editorial */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-bold: 1.5px;
  --bw-rule: 2px;   /* accent rules under totals / section heads */

  /* Shadows — low, warm, print-quiet */
  --sh-xs: 0 1px 2px rgba(22,21,26,0.05);
  --sh-sm: 0 1px 3px rgba(22,21,26,0.06), 0 1px 2px rgba(22,21,26,0.04);
  --sh-md: 0 4px 12px rgba(22,21,26,0.07), 0 1px 3px rgba(22,21,26,0.05);
  --sh-lg: 0 12px 32px rgba(22,21,26,0.10), 0 3px 8px rgba(22,21,26,0.06);
  --sh-accent: 0 6px 18px rgba(226,55,68,0.22);

  /* Motion — quick, no bounce */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}