/* tokens.css — design tokens. Palette taken from the logo (§2 of the spec).
   Everything else in the CSS refers to these; no raw hex outside this file. */

:root {
  /* Brand */
  --gold-1: #c9a44c;
  --gold-2: #a8823a;
  --gold-3: #8c6a2f;
  --gold-grad: linear-gradient(135deg, #c9a44c 0%, #a8823a 100%);
  --gold-soft: rgba(201, 164, 76, 0.13);

  --ink: #2b2724;        /* soft black for text */
  --charcoal: #34302b;   /* sidebar: charcoal, not pure black */
  --charcoal-deep: #2a2622;
  --cream: #fdfbf7;      /* warm ivory page background */
  --champagne: #f6efe3;  /* subtle raised surfaces */

  /* Semantic */
  --paid: #4f7a52;
  --paid-soft: rgba(79, 122, 82, 0.13);
  --due: #b04a32;
  --due-soft: rgba(176, 74, 50, 0.11);
  --warn: #b5832f;
  --warn-soft: rgba(181, 131, 47, 0.13);
  --info: #4a6d8c;
  --info-soft: rgba(74, 109, 140, 0.13);

  /* Type — 1.2 minor-third scale off 15px */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.6875rem;   /* 11px — labels, pills */
  --text-sm: 0.8125rem;   /* 13px — table cells, secondary */
  --text-base: 0.9375rem; /* 15px — body */
  --text-lg: 1.0625rem;   /* 17px — card titles */
  --text-xl: 1.375rem;    /* 22px — page heading */
  --text-2xl: 1.75rem;    /* 28px — stat values */
  --text-3xl: 2.125rem;   /* 34px — hero numbers */

  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* Spacing — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --sidebar-w: 244px;
  --sidebar-rail: 68px;    /* collapsed icon-only rail */
  --tap-min: 40px;         /* minimum comfortable tap target */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 130ms;
  --dur: 200ms;

  --z-sticky: 20;
  --z-nav: 60;
  --z-modal: 100;
  --z-dialog: 140;
  --z-toast: 200;
}

/* Light */
:root,
[data-theme='light'] {
  --bg: var(--cream);
  --surface: #ffffff;
  --surface-2: var(--champagne);
  --surface-3: #efe6d6;
  --text: var(--ink);
  --text-muted: #6f6659;
  --text-faint: #9a9083;
  --border: #ece3d3;          /* subtle, not heavy outlines */
  --border-strong: #dccfb6;
  --sidebar-bg: var(--charcoal);
  --sidebar-text: #d6cfc3;
  --sidebar-hover: rgba(255, 255, 255, 0.055);
  --sidebar-active: rgba(201, 164, 76, 0.17);
  --skeleton: linear-gradient(90deg, #efe6d6 25%, var(--champagne) 50%, #efe6d6 75%);

  /* Warm-tinted shadows: neutral grey reads cold against ivory. */
  --shadow-sm: 0 1px 2px rgba(74, 60, 40, 0.05);
  --shadow: 0 1px 2px rgba(74, 60, 40, 0.05), 0 6px 20px rgba(74, 60, 40, 0.055);
  --shadow-lg: 0 8px 26px rgba(74, 60, 40, 0.1), 0 24px 52px rgba(74, 60, 40, 0.1);
}

/* Dark */
[data-theme='dark'] {
  --bg: #211e1b;
  --surface: #2a2623;
  --surface-2: #332e2a;
  --surface-3: #3d3733;
  --text: #f3ede2;
  --text-muted: #a89e8f;
  --text-faint: #7d7466;
  --border: #3f3934;
  --border-strong: #4e4740;
  --sidebar-bg: var(--charcoal-deep);
  --sidebar-text: #cec6b9;
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active: rgba(201, 164, 76, 0.2);
  --skeleton: linear-gradient(90deg, #332e2a 25%, #3d3733 50%, #332e2a 75%);

  --paid: #7ba87e;
  --paid-soft: rgba(123, 168, 126, 0.16);
  --due: #d97a5f;
  --due-soft: rgba(217, 122, 95, 0.15);
  --warn: #d4a55c;
  --warn-soft: rgba(212, 165, 92, 0.15);
  --info: #7ba3c4;
  --info-soft: rgba(123, 163, 196, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}