/* tokens.css — Gastify web design tokens (source of truth for web consumers)
 *
 * Reconciled from the governed Flutter tokens in gastify-app:
 *   lib/gastify/theme/gastify_colors.dart
 *   lib/gastify/theme/gastify_typography.dart
 *
 * Rule: consumers reference these --gastify-* custom properties ONLY, never
 * a raw hex value. That is what makes a v2 dark theme a single
 * :root[data-theme="dark"] override with zero component rewrites.
 *
 * Where this repo's old gastify-header.js fallbacks disagreed with the app
 * (ink/border/surface), the governed app value wins — see
 * docs/web-tokens.md "Reconciliation: app wins".
 */

:root {
  /* ---- Brand & accent (GastifyColors.brand/accent) ---- */
  --gastify-color-brand: #aa49ea;
  --gastify-color-brand-soft: #f3ecff;
  --gastify-color-brand-dark: #8b35c9;
  --gastify-color-accent: #5e89fb;
  --gastify-color-accent-soft: #eaf1ff;

  /* ---- Call to action (GastifyColors.cta) ---- */
  --gastify-color-cta: #111114;
  --gastify-color-cta-text: #ffffff;

  /* ---- Surfaces & structure (GastifyColors.bg/surface/border) ---- */
  --gastify-color-bg: #f6f7fb;
  --gastify-color-surface: #ffffff;
  --gastify-color-surface-alt: #f1f3fa;
  --gastify-color-surface-elevated: #ffffff;
  --gastify-color-border: #e6e9f4;
  --gastify-color-divider: #edf0f7;

  /* Sticky header glass chrome. Deliberately NOT --gastify-color-surface —
     the translucent/blurred bar is a distinct visual role from a solid
     product card, kept as its own token so it never collides with it. */
  --gastify-color-header-surface: rgba(255, 255, 255, 0.7);

  /* ---- Text (GastifyColors.text/textSub/textMuted) ---- */
  --gastify-color-ink: #0b1220;
  --gastify-color-ink-sub: #5b6477;
  --gastify-color-ink-muted: #6b7280;

  /* ---- Status ramp (GastifyColors.success/warning/error/info) ---- */
  --gastify-color-success: #14b8a6;
  --gastify-color-success-soft: #f0fdfa;
  --gastify-color-warning: #d97706;
  --gastify-color-warning-soft: #fff4e5;
  --gastify-color-error: #dc2626;
  --gastify-color-error-soft: #feecec;
  --gastify-color-info: #2563eb;
  --gastify-color-info-soft: #eff6ff;

  /* ---- Overlays ---- */
  --gastify-color-overlay: rgba(0, 0, 0, 0.4);
  --gastify-color-overlay-heavy: rgba(0, 0, 0, 0.5);
  --gastify-color-on-color: #ffffff;

  /* ==========================================================================
   * Data-viz palette (NEW — no Flutter equivalent; contrast-checked >=3:1 on
   * white, mutually distinguishable). See docs/web-tokens.md for derivation.
   * ========================================================================== */

  /* Categorical: 8 stable hues. A given category index always maps to the
     same hue — the index<->category assignment lives in the dashboard's
     shared/lib/categories.ts (Slice C), not here. */
  --gastify-viz-cat-1: #aa49ea;
  --gastify-viz-cat-2: #5e89fb;
  --gastify-viz-cat-3: #14b8a6;
  --gastify-viz-cat-4: #d97706;
  --gastify-viz-cat-5: #e11d48;
  --gastify-viz-cat-6: #6366f1;
  --gastify-viz-cat-7: #0ea5e9;
  --gastify-viz-cat-8: #65a30d;

  /* Sequential: spend intensity / heat. Linear ramp across the brand's own
     soft -> base -> dark anchors (brandSoft -> brand -> brandDark). */
  --gastify-viz-seq-1: #f3ecff;
  --gastify-viz-seq-2: #d9b6f8;
  --gastify-viz-seq-3: #c380f1;
  --gastify-viz-seq-4: #aa49ea;
  --gastify-viz-seq-5: #a042df;
  --gastify-viz-seq-6: #963bd4;
  --gastify-viz-seq-7: #8b35c9;

  /* Diverging: under/over budget, matches the app's semaforo palette. */
  --gastify-viz-div-neg: #14b8a6;
  --gastify-viz-div-mid: #e6e9f4;
  --gastify-viz-div-pos: #dc2626;

  /* ==========================================================================
   * Dense/tabular type scale (NEW — the mobile app has no equivalent; every
   * size below is already in the app's lint-allowed set: 11/12/13/14/16/18/20/24).
   * ========================================================================== */
  --gastify-font-family:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;

  --gastify-text-2xs: 11px;
  --gastify-text-xs: 12px;
  --gastify-text-sm: 13px;
  --gastify-text-base: 14px;
  --gastify-text-md: 16px;
  --gastify-text-lg: 18px;
  --gastify-text-xl: 20px;
  --gastify-text-2xl: 24px;

  /* ==========================================================================
   * Form-control baseline (NEW — undefined anywhere; becomes the
   * shared/ui Input/Select/Checkbox primitives in gastify-dashboard).
   * ========================================================================== */
  --gastify-control-h: 40px;
  --gastify-control-radius: 12px; /* GastifyDimens.radiusM */
  --gastify-control-border: var(--gastify-color-border);
  --gastify-control-focus-ring: 2px solid var(--gastify-color-accent);
  --gastify-control-focus-ring-halo: 0 0 0 3px rgba(94, 137, 251, 0.25);
  --gastify-control-error-border: var(--gastify-color-error);
  --gastify-control-surface-disabled: var(--gastify-color-surface-alt);
  --gastify-control-placeholder: var(--gastify-color-ink-muted);

  /* ==========================================================================
   * Spacing scale (reconciled 1:1 by name from lib/gastify/theme/gastify_dimens.dart
   * GastifyDimens — same names, px values unchanged). See docs/web-tokens.md.
   * ========================================================================== */
  --gastify-space-page-padding-h: 20px; /* GastifyDimens.pagePaddingH */
  --gastify-space-page-top-padding: 56px; /* GastifyDimens.pageTopPadding */
  --gastify-space-card-padding: 20px; /* GastifyDimens.cardPadding */
  --gastify-space-card-padding-small: 16px; /* GastifyDimens.cardPaddingSmall */
  --gastify-space-item-spacing: 10px; /* GastifyDimens.itemSpacing */
  --gastify-space-section-spacing: 16px; /* GastifyDimens.sectionSpacing */
  --gastify-space-card-gap: 10px; /* GastifyDimens.cardGap */
  --gastify-space-section-gap: 24px; /* GastifyDimens.sectionGap */
  --gastify-space-header-bottom-gap: 8px; /* GastifyDimens.headerBottomGap */

  /* ==========================================================================
   * Radii scale (reconciled 1:1 from GastifyDimens.radiusXS..radiusXL).
   * --gastify-control-radius above already equals radiusM (12px) — kept as
   * its own token since it predates this scale; both stay in sync by value.
   * ========================================================================== */
  --gastify-radius-xs: 6px; /* GastifyDimens.radiusXS */
  --gastify-radius-s: 8px; /* GastifyDimens.radiusS */
  --gastify-radius-m: 12px; /* GastifyDimens.radiusM */
  --gastify-radius-l: 16px; /* GastifyDimens.radiusL */
  --gastify-radius-xl: 24px; /* GastifyDimens.radiusXL */

  /* ==========================================================================
   * Shadow scale (reconciled 1:1 from lib/gastify/theme/gastify_shadows.dart
   * GastifyShadows — each BoxShadow's color/blurRadius/offset ported to CSS
   * `offsetX offsetY blurRadius color` syntax, multi-layer shadows kept as
   * comma-separated layers in the same order as the Dart list).
   * ========================================================================== */
  --gastify-shadow-card-sm: 0 1px 6px rgba(0, 0, 0, 0.04); /* GastifyShadows.cardSm */
  --gastify-shadow-card-xl: /* GastifyShadows.cardXl */
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 6px rgba(0, 0, 0, 0.04);
  --gastify-shadow-list-card: /* GastifyShadows.listCard */
    0 6px 18px rgba(0, 0, 0, 0.045),
    0 1px 4px rgba(0, 0, 0, 0.02);
  --gastify-shadow-sheet: 0 -4px 30px rgba(0, 0, 0, 0.15); /* GastifyShadows.sheet */
  --gastify-shadow-cta: 0 4px 16px rgba(17, 17, 20, 0.25); /* GastifyShadows.cta (GastifyColors.cta @ 0.25) */
  --gastify-shadow-fab: 0 4px 16px rgba(17, 17, 20, 0.3); /* GastifyShadows.fab (GastifyColors.cta @ 0.30) */
}

/* Tabular figures for currency/number columns — absent from the mobile
   card-based scale, needed for dense table/grid layouts. */
.tabular {
  font-variant-numeric: tabular-nums;
}