/* ============================================================
   Design Tokens - Single source of truth for the entire app.
   Import this file FIRST in App.razor (<link>), before main.css.

   BREAKPOINTS (reference - use in @media rules):
     Tablet   :  768px   (min-width for tablet landscape)
     Desktop  : 1024px   (min-width for desktop)
     Wide     : 1440px   (min-width for large / wide monitors)
     Ultra    : 1920px   (min-width for ultra-wide)

   CSS custom properties cannot be used inside @media conditions,
   so the raw pixel values are documented here and used directly
   in @media rules throughout the codebase.
   ============================================================ */

:root {
  /* -- Font-size scale (rem-based) -------------------------- */
  --fs-2xs : 0.625rem;  /*  10px @ 16px base */
  --fs-xs  : 0.7rem;    /*  ~11px */
  --fs-sm  : 0.75rem;   /*  12px */
  --fs-base: 0.8rem;    /*  ~13px - default body / form text */
  --fs-md  : 0.875rem;  /*  14px */
  --fs-lg  : 1rem;      /*  16px */
  --fs-xl  : 1.125rem;  /*  18px */
  --fs-2xl : 1.25rem;   /*  20px */
  --fs-3xl : 1.5rem;    /*  24px */
  --fs-4xl : 2rem;      /*  32px */

  /* -- Semantic font-size aliases --------------------------- */
  --fs-body        : var(--fs-base);   /* default paragraph / form  */
  --fs-label       : var(--fs-base);   /* form labels               */
  --fs-input       : var(--fs-base);   /* form inputs / selects     */
  --fs-btn         : var(--fs-sm);     /* buttons                   */
  --fs-table-header: var(--fs-base);   /* table headers             */
  --fs-table-cell  : var(--fs-base);   /* table cells               */
  --fs-caption     : var(--fs-xs);     /* small captions / tooltips */
  --fs-title       : var(--fs-3xl);    /* page titles               */
  --fs-subtitle    : var(--fs-lg);     /* section subtitles         */
  --fs-modal-title : var(--fs-xl);     /* modal dialog titles       */
  --fs-nav         : var(--fs-lg);     /* navigation links          */
  --fs-icon        : var(--fs-base);   /* icon font sizes           */
}

/* -- Breakpoint-specific overrides -------------------------- */

/* Tablet landscape (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --fs-body        : var(--fs-sm);
    --fs-label       : var(--fs-sm);
    --fs-input       : var(--fs-sm);
    --fs-btn         : var(--fs-xs);
    --fs-table-header: var(--fs-sm);
    --fs-table-cell  : var(--fs-sm);
    --fs-caption     : var(--fs-2xs);
    --fs-title       : var(--fs-2xl);
    --fs-subtitle    : var(--fs-md);
    --fs-modal-title : var(--fs-lg);
    --fs-nav         : var(--fs-md);
    --fs-icon        : var(--fs-sm);
  }
}

/* Small desktop / laptop (1024px - 1439px) */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --fs-body        : var(--fs-sm);
    --fs-label       : var(--fs-sm);
    --fs-input       : var(--fs-sm);
    --fs-btn         : var(--fs-xs);
    --fs-table-header: var(--fs-sm);
    --fs-table-cell  : var(--fs-sm);
    --fs-caption     : var(--fs-2xs);
    --fs-title       : var(--fs-3xl);
    --fs-subtitle    : var(--fs-lg);
    --fs-modal-title : var(--fs-xl);
    --fs-nav         : var(--fs-md);
    --fs-icon        : var(--fs-sm);
  }
}

/* Large desktop (1440px+) - uses the default :root values */

/* -- Visibility utility classes ----------------------------- */
/* Uses the Bootstrap 5 approach: only HIDE when outside the
   target range, so the element keeps its natural display value
   (flex, grid, inline, etc.) when visible.                    */

/* Show only on desktop (>= 1024px) */
@media screen and (max-width: 1023px) {
  .desktop-only { display: none !important; }
}

/* Show only on tablet range (768px - 1023px) */
@media screen and (max-width: 767px) {
  .tablet-only { display: none !important; }
}
@media screen and (min-width: 1024px) {
  .tablet-only { display: none !important; }
}

/* Show on tablet and above (>= 768px) */
@media screen and (max-width: 767px) {
  .tablet-up { display: none !important; }
}

/* Show only below tablet - future-proof for mobile (< 768px) */
@media screen and (min-width: 768px) {
  .mobile-only { display: none !important; }
}