/**
 * UI Tokens
 * Centralized design tokens for consistent UI across the application.
 * These tokens should be used by all pages to ensure visual consistency.
 */

:root {
  /* ============================================
   * SPACING SCALE
   * Set dynamically by applyAppFontSize() in fontSize.ts.
   * At the default font size (14px) the scale is 1.
   * At larger sizes the scale shrinks so that padding,
   * margins and gaps compensate for the bigger text.
   * ============================================ */
  --spacing-scale: 1;

  /* Font-size scale: ≥ 1 multiplier tracking how much bigger
   * the chosen font is vs. the default (set by fontSize.ts).
   * Retained for backward compatibility; prefer the `max(<px>, <rem>)`
   * pattern below so containers also track OS/browser font scaling, not
   * just the in-app font-size step. */
  --font-size-scale: 1;

  /* ============================================
   * LAYOUT TOKENS
   * ============================================ */
  --page-max-width: 1200px;
  --page-padding-x: calc(20px * var(--spacing-scale));
  --page-padding-y: calc(24px * var(--spacing-scale));

  /* Section & component gaps */
  --section-gap: calc(24px * var(--spacing-scale));
  --card-gap: calc(16px * var(--spacing-scale));
  --row-gap: calc(12px * var(--spacing-scale));
  --field-gap: calc(8px * var(--spacing-scale));

  /* ============================================
   * CARD TOKENS
   * ============================================ */
  --card-padding: calc(clamp(12px, 1.4vw, 16px) * var(--spacing-scale));
  --card-padding-lg: calc(clamp(16px, 2vw, 20px) * var(--spacing-scale));
  --card-radius: 14px;
  --card-border: 1px solid var(--color-border);
  --card-border-subtle: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  --card-shadow: none;
  --card-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.25);

  /* ============================================
   * SURFACE TOKENS (Background hierarchy)
   * ============================================ */
  --surface-1: var(--color-bg); /* Deepest level: page background */
  --surface-2: var(--color-surface); /* Mid level: card backgrounds */
  --surface-3: var(--color-card); /* Top level: interactive elements */

  /* Aliases so --color-card / --color-accent resolve even though the theme
     defines --color-bg-card / --color-primary. Prevents var() cascade
     failure (and silent transparent fallback) in consumers that assume the
     canonical short names. */
  --color-card: var(--color-bg-card, #ffffff);
  --color-accent: var(--color-primary, #2563eb);
  --color-accent-hover: var(--color-primary-dark, var(--color-primary, #1d4ed8));

  /* ============================================
   * TEXT TOKENS (Text hierarchy)
   * ============================================ */
  --text-1: var(--color-text); /* Primary text */
  --text-2: color-mix(in srgb, var(--color-text) 80%, var(--color-muted) 20%); /* Secondary text */
  --text-3: var(--color-muted); /* Tertiary/muted text */

  /* ============================================
   * ACCENT TOKENS (Primary action color)
   * ============================================ */
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-subtle: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --accent-border: color-mix(in srgb, var(--color-accent) 32%, var(--color-border) 68%);

  /* ============================================
   * FOCUS TOKENS
   * ============================================ */
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent);
  --focus-ring-offset: 2px;

  /* ============================================
   * PAGE HEADER TOKENS
   * ============================================ */
  --page-header-height: max(64px, 4.5714rem);
  --page-header-padding-x: calc(20px * var(--spacing-scale));
  --page-header-padding-y: calc(10px * var(--spacing-scale));
  --page-header-gap: calc(16px * var(--spacing-scale));

  /* ============================================
   * BUTTON TOKENS
   * ============================================ */
  --btn-height: var(--control-height);
  --btn-height-sm: calc(var(--control-height) - 8px);
  --btn-padding-x: calc(1.25rem * var(--spacing-scale));
  --btn-padding-y: calc(0.6rem * var(--spacing-scale));
  --btn-radius: 8px;
  --btn-font-weight: 600;

  /* Primary button - More prominent with accent color */
  --btn-primary-bg: color-mix(in srgb, var(--color-accent) 90%, var(--color-card) 10%);
  --btn-primary-border: 1px solid color-mix(in srgb, var(--color-accent) 80%, transparent);
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: color-mix(in srgb, var(--color-accent) 100%, #000000 10%);

  /* Secondary button - Neutral, subtle */
  --btn-secondary-bg: color-mix(in srgb, var(--color-card) 92%, var(--color-bg) 8%);
  --btn-secondary-border: 1px solid var(--color-border);
  --btn-secondary-text: var(--color-text);

  /* ============================================
   * TABLE TOKENS
   * ============================================ */
  --table-header-height: max(42px, 3rem);
  --table-row-height: max(48px, 3.4286rem);
  --table-row-height-dense: max(42px, 3rem);
  --table-cell-padding-x: calc(12px * var(--spacing-scale));
  --table-cell-padding-y: calc(10px * var(--spacing-scale));
  --table-numeric-min-width: 100px;
  --table-action-col-width: 48px;

  /* ============================================
   * FORM TOKENS
   * ============================================ */
  /* Use max() to ensure height scales with font-size at larger text settings */
  --input-height: max(2.6em, var(--control-height));
  --input-padding-x: calc(0.75rem * var(--spacing-scale));
  --input-padding-y: calc(0.55rem * var(--spacing-scale));
  --input-radius: 0px;
  --input-border: 1px solid var(--color-border);
  --input-bg: var(--color-card);

  --label-font-size: 0.95em;
  --label-font-weight: 600;
  --label-color: var(--text-2);

  --helper-font-size: 0.9em;
  --helper-color: var(--text-3);

  --error-color: var(--color-error);
  --error-border: 1px solid var(--color-error);

  /* ============================================
   * ENTITY ACCENT TOKENS
   * Subtle structural accents for entity orientation.
   * Used sparingly on page title underlines and section headers.
   * These should NOT affect data legibility or compete with status colors.
   * ============================================ */
  --entity-invoice: #3b82f6; /* Blue - invoices & quotes */
  --entity-customer: #22c55e; /* Green - customers */
  --entity-expense: #f59e0b; /* Orange - expenses/purchases */
  --entity-contract: #a855f7; /* Purple - contracts */
  --entity-object: #14b8a6; /* Teal - properties/objects */
  --entity-project: #6366f1; /* Indigo - projects */
  --entity-dashboard: #22d3c9; /* Teal/accent - dashboard home */
  --entity-settings: #8b5cf6; /* Violet - settings pages */
  --entity-overview: #ec4899; /* Pink - overview/analytics pages */
  --entity-profile: #06b6d4; /* Cyan - profile page */

  /* ============================================
   * STATUS TOKENS
   * ============================================ */
  --status-pill-height: max(24px, 1.7143rem);
  --status-pill-padding: 0 calc(8px * var(--spacing-scale));
  --status-pill-radius: 999px;
  --status-pill-font-size: 0.6875rem; /* 11px at default root - scales with user preference */
  --status-pill-font-weight: 600;

  /* ============================================
   * HISTORY/TIMELINE TOKENS
   * ============================================ */
  --history-dot-size: 8px;
  --history-item-gap: calc(12px * var(--spacing-scale));
  --history-border: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);

  /* ============================================
   * GRID PRESETS (for page layouts)
   * ============================================ */
  --grid-2col-ratio: 2fr 1fr; /* Main + sidebar (detail pages) */
  --grid-2col-equal-ratio: 1fr 1fr; /* Equal columns (edit pages) */
  --grid-gap: calc(24px * var(--spacing-scale));
  --grid-gap-sm: calc(16px * var(--spacing-scale));
  --grid-breakpoint: 980px; /* Collapse to single column */

  /* ============================================
   * MOTION TOKENS
   * Native-feeling transitions. Spring easings, not linear/ease.
   * Durations calibrated for perceived responsiveness on mobile.
   * ============================================ */
  --motion-instant: 100ms; /* press ripples, haptic-synced feedback */
  --motion-fast: 200ms; /* floater show/hide, small scale changes */
  --motion-base: 250ms; /* bar slide, content morph */
  --motion-slow: 350ms; /* radial menu stagger, sheet open */

  /* Material 3 emphasized easing — decel for enter, accel for exit */
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-accel: cubic-bezier(0.4, 0, 0.68, 0);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
   * Z-INDEX LADDER
   * Single source of truth. Do not use raw numbers in component CSS.
   * ============================================ */
  --z-bottom-nav: 30;
  --z-action-bar: 40;
  --z-fab: 50;
  /* Sheets and above sit above any structural chrome (demo banner is
     z-index 1000) so a row action sheet is never visually obscured by
     a fixed banner or bottom bar. */
  --z-sheet-backdrop: 1060;
  --z-sheet: 1061;
  --z-modal-backdrop: 1070;
  --z-modal: 1071;
  --z-toast: 1090;
  --z-command-palette: 1100;

  /* ============================================
   * MOBILE BOTTOM STACK TOKENS
   * Heights published by the stack so floaters/content can lift.
   * Updated by useBottomStack at runtime.
   * ============================================ */
  --bottom-nav-h: 0px;
  --action-bar-h: 0px;
  --keyboard-offset: 0px;
  /* Safe-area handled once here — components consume this, not env() directly */
  --safe-bottom: max(8px, env(safe-area-inset-bottom, 0px));

  /* ============================================
   * TYPOGRAPHY SCALE (supplements existing)
   * ============================================ */
  --font-xs: 0.8125rem; /* 13px - meta text (was 12px) */
  --font-sm: 0.9375rem; /* 15px - body small (was 14px) */
  --font-md: 1rem; /* 16px - body */
  --font-heading-sm: 0.9375rem; /* 15px at default root */
  --font-heading-md: 1.0625rem; /* 17px at default root */
  --font-heading-lg: 1.25rem; /* 20px at default root */
  --font-heading-xl: 1.625rem; /* 26px at default root */
}

/* ============================================
 * LARGE FONT-SIZE COMPENSATIONS
 * At 18px, prevent UI from looking cramped on
 * smaller screens (e.g. 14" MacBook at 1440px).
 * ============================================ */
html[data-font-size="18"] {
  --card-padding: calc(clamp(14px, 1.6vw, 20px) * var(--spacing-scale));
  --page-padding-x: calc(18px * var(--spacing-scale));
  --section-gap: calc(20px * var(--spacing-scale));
  --card-gap: calc(14px * var(--spacing-scale));
}

html[data-font-size="16"],
html[data-font-size="18"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
 * WRAP, DON'T CLIP — compact chrome at larger fonts
 * Buttons, badges, status pills, tabs and nav items use
 * `white-space: nowrap` (often + ellipsis) to stay compact at the
 * default size. At the larger font steps that nowrap clips the label
 * instead of letting it grow. Relax it globally for this chrome so the
 * text wraps to a second line rather than getting cut off. Padding-based
 * heights mean these elements grow vertically without further work.
 * System chrome must never be truncated — only genuine user content may
 * be (via the TruncatedText primitive, which always carries a tooltip).
 * ============================================ */
html:is([data-font-size="16"], [data-font-size="18"])
  :is(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-green,
    .btn-warning,
    .btn-add,
    .btn-outline,
    .btn-ghost,
    .badge,
    .ui-tab-switch__tab,
    [class*="status-pill"],
    [class*="chip"]
  ) {
  white-space: normal;
  text-overflow: clip;
  text-align: center;
}

/* ============================================
 * HONEST TRUNCATION UTILITY
 * Backs the <UiTruncate> primitive and is also usable directly as a class.
 * Reserve for genuine user content (names, free text) — never for system
 * chrome, which should wrap. `min-width: 0` is what makes it actually shrink
 * inside a flex/grid row instead of overflowing. Lives here (not base.css) so
 * the web app — which imports ui-tokens.css but not base.css — gets it too.
 * ============================================ */
.u-truncate {
  min-width: 0;
}

.u-truncate--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-truncate--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--u-truncate-lines, 2);
  line-clamp: var(--u-truncate-lines, 2);
  overflow: hidden;
}

/* ============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================ */
@media (max-width: 1200px) {
  :root {
    --page-max-width: 100%;
    --page-padding-x: calc(16px * var(--spacing-scale));
    --section-gap: calc(20px * var(--spacing-scale));
    --grid-gap: calc(20px * var(--spacing-scale));
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding-x: calc(12px * var(--spacing-scale));
    --page-padding-y: calc(16px * var(--spacing-scale));
    --section-gap: calc(16px * var(--spacing-scale));
    --card-gap: calc(12px * var(--spacing-scale));
    --grid-gap: calc(16px * var(--spacing-scale));
    --page-header-height: max(56px, 4rem);
    --page-header-padding-x: calc(12px * var(--spacing-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}