globals.css

@import "tailwindcss";

/**
 * Design Token Migration Reference
 *
 * This file defines the shared design tokens used across the Stellopay frontend.
 * Components should reference these tokens instead of hardcoded hex colors.
 *
 * Migration Status: See design/token-migration-matrix.md for the current inventory and rollout order.
 *
 * Token Categories:
 * - Colors: background, foreground, semantic (primary, destructive, success, warning)
 * - Typography: font families (sans, clash, general)
 * - Spacing: border-radius scale (sm, md, lg, xl)
 * - Effects: focus ring and shadows
 *
 * Usage: Reference via CSS custom properties (--color-*, --font-*, --radius-*)
 * or via Tailwind classes (bg-primary, text-foreground, rounded-lg, etc.).
 */

@custom-variant dark (&:is(.dark *));

    /* Chart colors — light mode
     * Used by RechartsMiniBarChart and other chart components.
     * Each token maps to a semantic chart color that adapts in dark mode.
     */
    --chart-blue: #3B82F6;
    --chart-green: #10B981;
    --chart-amber: #F59E0B;
    --chart-tooltip-bg: #ffffff;
 main
    --chart-tooltip-border: #e4e4e7;
  }

  .dark {
 design-system/mini-bar-chart-dark-tokens
    --chart-1: #6b8aff;
    --chart-2: #34d399;
    --chart-3: #fbbf24;
    --chart-4: #a78bfa;
    --chart-5: #f87171;
    --chart-tooltip-bg: #18181b;
    --chart-tooltip-text: #fafafa;
    --chart-tooltip-border: #27272a;

    /* Elevation / shadow scale (dark) — deeper shadows for contrast */
    --elevation-1: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --elevation-2: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --elevation-3: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    --elevation-4: 0 20px 25px -5px rgb(0 0 0 / 0.65), 0 8px 10px -6px rgb(0 0 0 / 0.5);
 main
  }
}

@theme inline {
  --shadow-elevation-1: var(--elevation-1);
  --shadow-elevation-2: var(--elevation-2);
  --shadow-elevation-3: var(--elevation-3);
  --shadow-elevation-4: var(--elevation-4);

  /* Disabled-state tokens — mapped so Tailwind generates cursor-disabled
   * and opacity-disabled utilities consumed by every disabled control.
   */
  --opacity-disabled: var(--disabled-opacity);
  --cursor-disabled: not-allowed;

  /* Shimmer timing tokens — consumed by skeleton-shimmer utility */
  --duration-shimmer: var(--shimmer-duration);
  --easing-shimmer: var(--shimmer-easing);
}

/**
 * disabled-state
 * ---------------
 * Composable utility that applies the canonical disabled look to any element.
 * Each property is driven by a CSS custom property so a single token edit
 * updates every disabled control in the project.
 *
 * Usage:
 *   <button className="disabled-state" disabled>Save</button>
 *
 * Note: Because Tailwind's disabled: variant does not compose with @utility,
 * prefer the individual utilities in most cases:
 *   className="disabled:cursor-disabled disabled:opacity-disabled"
 */
@utility disabled-state {
  opacity: var(--disabled-opacity);
  cursor: var(--disabled-cursor, not-allowed);
  pointer-events: none;
}

@utility text-display-2xl {
  font-family: var(--font-clash);
  font-size: var(--font-display-2xl);
  line-height: var(--leading-display-2xl);
  letter-spacing: var(--tracking-display-2xl);
}

@utility text-display-xl {
  font-family: var(--font-clash);
  font-size: var(--font-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
}

@utility text-heading-lg {
  font-family: var(--font-clash);
  font-size: var(--font-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

/**
 * section-spacing
 * ---------------
 * One-line utility that applies the canonical three-step vertical-rhythm
 * scale to any landing section.  Use it in place of ad-hoc py-* values:
 *
 *   <section className="section-spacing ...">
 *
 * Equivalent to `py-16 sm:py-20 lg:py-24` (64 px / 80 px / 96 px).
 * The values are driven by the --section-py-* CSS custom properties
 * defined in :root so that a single token edit updates every section.
 */
@utility section-spacing {
  padding-top: var(--section-py-sm);
  padding-bottom: var(--section-py-sm);

  @media (width >= 640px) {
    padding-top: var(--section-py-md);
    padding-bottom: var(--section-py-md);
  }

  @media (width >= 1024px) {
    padding-top: var(--section-py-lg);
    padding-bottom: var(--section-py-lg);
  }
}

@utility text-body-lg {
  font-family: var(--font-general-sans), var(--font-inter);
  font-size: var(--font-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

@utility text-body-md {
  font-family: var(--font-general-sans), var(--font-inter);
  font-size: var(--font-body-md);
  line-height: var(--leading-body-md);
  letter-spacing: var(--tracking-body-md);
}

@utility text-caption-sm {
  font-family: var(--font-inter);
  font-size: var(--font-caption-sm);
  line-height: var(--leading-caption-sm);
  letter-spacing: var(--tracking-caption-sm);
}

/* ── Skeleton shimmer — shared animation ──────────────────────────────────
 * Single .skeleton-shimmer class consumed by every skeleton component
 * (Skeleton, CardSkeleton, TableSkeleton, etc.).  A translucent overlay
 * slides left-to-right across the placeholder surface.
 *
 * Duration and easing are driven by --shimmer-* CSS custom properties
 * defined once in :root so every skeleton animates in lockstep.
 *
 * Accessibility — prefers-reduced-motion:
 *   The directional sweep is replaced with a stationary opacity pulse that
 *   conveys "loading" without movement that can trigger vestibular disorders
 *   (WCAG 2.1 AA Success Criterion 2.3.3).
 *
 * This must be a plain class (not @utility) because Tailwind v4's @utility
 * does not support pseudo-elements.
 * ------------------------------------------------------------------------ */

@keyframes shimmer-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes shimmer-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255 255 255 / 0.06) 50%,
    transparent 100%
  );
  animation: shimmer-slide var(--shimmer-duration, 2s) var(--shimmer-easing, ease-in-out) infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after {
    background: transparent;
  }

  .skeleton-shimmer {
    animation: shimmer-pulse var(--shimmer-duration, 2s) ease-in-out infinite;
  }
}

/* Statement output intentionally has its own print scope; table print rules and
   navigation never leak into the reconciliation document. */
@media print {
  body * {
    visibility: hidden;
  }

  .statement-print-root,
  .statement-print-root * {
    visibility: visible;
  }

  .statement-print-root {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
    color: #111827 !important;
    background: #ffffff !important;
  }

  .statement-print-root .statement-actions {
    display: none !important;
  }

  .statement-print-root * {
    color: #111827 !important;
    background-color: transparent !important;
  }

  .statement-print-root table,
  .statement-print-root tr {
    break-inside: avoid;
  }

  .statement-print-root thead {
    display: table-header-group;
  }

  @page {
    margin: 16mm;
  }

  /* ── Transactions table print scope ─────────────────────────────────────
   * When printing the interactive transactions page, hide every control
   * (filters, search, pagination, sort triggers, checkboxes, density
   * toggle, receipt download buttons) and show only the data rows in a
   * legible, grayscale-friendly layout with no page-breaks inside rows.
   * Fully independent of the reconciliation-statement scope above.      */

  .transactions-print-root,
  .transactions-print-root * {
    visibility: visible;
  }

  .transactions-print-root {
    position: static;
    background: #ffffff !important;
    color: #111827 !important;
  }

  .transactions-print-root * {
    color: #111827 !important;
    background-color: transparent !important;
    border-color: #d1d5db !important;
  }

  .transactions-print-root table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .transactions-print-root table thead {
    display: table-header-group;
  }

  .transactions-print-root img {
    filter: grayscale(100%) contrast(1.15);
  }

  /* ── Landing page print scope ────────────────────────────────────────────
   * When printing the public landing page (hero + footer), hide every
   * decorative element (gradient orbs, floating cards, shadows), collapse
   * the footer to essential links only, and render all text in a
   * high-contrast black-on-white palette to save ink and stay readable
   * when printed for offline reference.
   *
   * The .landing-print-root class is applied to the top-level <div> in
   * components/landing/landing-page.tsx and matching selectors target the
   * actual DOM structure of hero.tsx and footer.tsx.                  */

  .landing-print-root,
  .landing-print-root * {
    visibility: visible;
  }

  .landing-print-root {
    position: static;
    background: #ffffff !important;
    color: #111827 !important;
  }

  .landing-print-root * {
    color: #111827 !important;
    background-color: transparent !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
  }

  /* Hero: hide all decorative gradient orbs (aria-hidden blur-3xl) */
  .landing-print-root section[aria-label*="Hero"] [aria-hidden="true"] {
    display: none !important;
  }

  /* Hero: hide floating cards (absolutely positioned z-2 cards that
     float over the main mockup card). Uses z-2 instead of rotate so
     the selector works regardless of prefers-reduced-motion state. */
  .landing-print-root section[aria-label*="Hero"] [class*="absolute"][class*="z-2"] {
    display: none !important;
  }

  /* Hero: convert gradient text to solid printable black */
  .landing-print-root section[aria-label*="Hero"] h1 span.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  /* Hero: collapse CTA buttons to simple bordered buttons */
  .landing-print-root section[aria-label*="Hero"] button {
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    color: #111827 !important;
  }

  /* Footer: hide the cookie consent banner */
  .landing-print-root footer [role="dialog"][aria-label="Cookie consent"] {
    display: none !important;
  }

  /* Footer: hide newsletter subscription section */
  .landing-print-root footer form {
    display: none !important;
  }

  /* Footer: hide social media icon links */
  .landing-print-root footer a[target="_blank"] {
    display: none !important;
  }

  /* Footer: simplify link text */
  .landing-print-root footer a {
    color: #111827 !important;
    text-decoration: underline;
  }
}

@utility text-body-lg {
  font-family: var(--font-general-sans), var(--font-inter);
  font-size: var(--font-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

@utility text-body-md {
  font-family: var(--font-general-sans), var(--font-inter);
  font-size: var(--font-body-md);
  line-height: var(--leading-body-md);
  letter-spacing: var(--tracking-body-md);
}

@utility text-caption-sm {
  font-family: var(--font-inter);
  font-size: var(--font-caption-sm);
  line-height: var(--leading-caption-sm);
  letter-spacing: var(--tracking-caption-sm);
}