/* ==========================================================================
   Income Outsource — Design System
   Single source of truth for every design value on the site.
   Restyle the whole site by changing values here — nothing else.
   ========================================================================== */

:root {

  /* Tells the browser this page manages its own light/dark styling, so it
     stops auto-painting native form controls (buttons, scrollbars) with
     OS accent colors when it detects a transparent/unstyled background. */
  color-scheme: light;

  /* ---------------------------------------------------------------------
     Colors — Light theme (default)
     "Bold Signal" palette: bright indigo + a coral accent on a cool
     near-white, replacing the original "Freelancer's Ledger" warm-paper/
     copper direction (still available as a preview variant — see
     assets/css/design-variants.css's [data-design="ledger"]).
     --------------------------------------------------------------------- */
  --color-primary: #17152b;
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-soft: #e8e6fb;

  /* Secondary "pop" accent — used only for the post-category chip, kept
     deliberately separate from --color-accent so the chip reads as a
     distinct badge rather than just another link-colored element. */
  --color-chip-bg: #ff6b4a;

  --color-text: #23213a;
  --color-text-muted: #6b6884;
  --color-text-inverse: #fafaff;

  /* Solid "ink" surfaces — footer, code blocks, buttons, the pagination
     "current page" stamp, hero/card image placeholders. Deliberately does
     NOT flip with the rest of the palette in dark mode: these are meant
     to read as a fixed dark ink block in both themes (the same way a
     footer or a code block usually stays dark regardless of site theme),
     just paired with --color-on-ink for legible text. */
  --color-ink: #17152b;
  --color-ink-light: #262346;
  --color-on-ink: #f2f1fb;

  --color-bg: #f7f6fc;
  --color-bg-alt: #f1eefa;
  --color-card-bg: #ffffff;
  --color-surface-1: #ffffff;
  --color-surface-2: #f1eefa;
  --color-surface-3: #e3e1f5;

  --color-border: #e3e1f0;
  --color-border-strong: #c9c5e8;

  --color-link: var(--color-primary);
  --color-link-hover: var(--color-accent);

  --color-overlay: rgba(23, 21, 43, 0.6);
  --color-overlay-light: rgba(23, 21, 43, 0.06);

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;

  /* ---------------------------------------------------------------------
     Typography
     Sora (bold geometric display) for headings, Inter for body and for
     meta/data — no separate mono face; the "ledger line" treatment
     (IBM Plex Mono) belonged to the old direction, not this one.
     --------------------------------------------------------------------- */
  --font-heading: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  --fs-h2: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-lead: 1.125rem;

  --lh-heading: 1.25;
  --lh-body: 1.7;
  --lh-tight: 1.1;

  --ls-heading: -0.005em;
  --ls-body: normal;
  --ls-caps: 0.02em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------------
     Spacing scale
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---------------------------------------------------------------------
     Radii — large and rounded, a modern-SaaS feel rather than the sharp
     2-6px "paper/ledger" radii the original direction used.
     --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Shadows — soft, indigo-tinted elevation scale (not neutral ink-tinted)
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(79, 70, 229, 0.06);
  --shadow-sm: 0 2px 8px rgba(79, 70, 229, 0.08);
  --shadow-md: 0 8px 24px rgba(79, 70, 229, 0.12);
  --shadow-lg: 0 16px 40px rgba(79, 70, 229, 0.16);
  --shadow-xl: 0 28px 56px rgba(79, 70, 229, 0.2);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.35);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  /* Single posts only (single.css) — a 2-column reading+sidebar layout
     needs more room than the sitewide container; other templates keep
     the narrower, more editorial --container-max on purpose. */
  --container-max-wide: 1440px;
  --content-measure: 68ch;
  /* WP block-editor "wide"/"full" alignment breakout widths, used by
     .entry-content .alignwide/.alignfull in single.css. */
  --content-align-wide: 900px;
  --content-align-full: 1400px;
  --gutter: var(--space-5);
  --gutter-lg: var(--space-8);
  --header-height: 76px;

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-back-to-top: 250;
  /* Always above every other layer — a focused skip-link must never be
     hidden behind a modal/toast/overlay, since it's the first thing a
     keyboard user reaches. */
  --z-skip-link: 1000;
}

/* ==========================================================================
   Colors — Dark theme
   Not a naive inversion: surfaces are raised gradually from a near-black
   indigo (never pure black), text is softened off pure white, and the
   indigo accent is brightened to stay accessible on dark backgrounds.

   --color-primary flips to a bright paper tone here so headings/nav/links
   stay legible on the dark page — it's a text/foreground color throughout
   the theme. --color-ink is the separate, deliberately non-flipping pair
   (with --color-on-ink) used for solid ink-block surfaces — footer, code
   blocks, buttons, pagination "current" state, image placeholders — which
   should stay dark ink regardless of theme, just raised a step above the
   page background here so it still reads as a distinct surface instead of
   disappearing into it.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #edebfa;
  --color-accent: #8b7fff;
  --color-accent-hover: #a79cff;
  --color-accent-soft: #2a2350;

  --color-text: #dad7ee;
  --color-text-muted: #948fba;
  --color-text-inverse: #14122a;

  --color-ink: #1e1b3a;
  --color-ink-light: #2a2554;
  --color-on-ink: #edebfa;

  --color-bg: #100e20;
  --color-bg-alt: #191530;
  --color-card-bg: #191530;
  --color-surface-1: #150f28;
  --color-surface-2: #191530;
  --color-surface-3: #221d42;

  --color-border: #2e2854;
  --color-border-strong: #3e3670;

  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-overlay-light: rgba(237, 235, 250, 0.08);

  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* Shadows read weaker on dark surfaces, so pair a hairline highlight rim
     with a deeper, more opaque drop shadow rather than just darkening —
     this gives elevated surfaces (cards, dropdowns, modals) a visible edge
     the way a border would, without forking any component CSS. */
  --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 56px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(139, 127, 255, 0.45);
}