/* ================================================================
   CoreHub Design System — Foundation Layer
   ================================================================
   This is the missing "base layer" the app never had: one shared
   scale for breakpoints, page-container width, modal size, control
   height, and fluid type. Every one of these currently exists as
   35+ different ad-hoc max-width values, 15+ different modal widths,
   and 8+ different button/input heights scattered across the CSS
   files, picked independently page by page over time.

   This file only DEFINES the shared scale as CSS custom properties
   plus a small set of reusable utility classes (.ch-container,
   .ch-modal-sm/md/lg/xl, .ch-touch). It does not override or remove
   any existing page's CSS - nothing consumes these new tokens unless
   explicitly opted in, so adding this file changes nothing visually
   on its own. Pages and components migrate to it incrementally.

   BREAKPOINT CONVENTION (use these four everywhere going forward -
   the historical 767/768/760/700/701/720 etc. variants all meant
   roughly the same "phone" cutoff and should converge on 767px):
     --ch-bp-xl   : 1280px  (large desktop / wide monitor)
     --ch-bp-lg   : 1024px  (small desktop / laptop)
     --ch-bp-md   : 900px   (tablet landscape, e.g. iPad landscape)
     --ch-bp-sm   : 767px   (tablet portrait / large phone - the
                             existing mobile split point already used
                             in corehub-mobile-oms-sync.css,
                             corehub-org-edit.css and
                             corehub-admin-modals-refresh.css; kept
                             as-is so this layer doesn't move the
                             line every other mobile file already
                             coordinates around)
     --ch-bp-xs   : 480px   (small phone, e.g. iPhone SE width)
   These are documented values for @media queries (custom media
   isn't supported in plain CSS yet); new/updated CSS should use
   these four numbers instead of picking a new one.
   ================================================================ */

:root {
  /* ---- Page container widths (replaces 7+ hardcoded page widths) ---- */
  --ch-container-sm: 640px;   /* focused single-column forms */
  --ch-container-md: 960px;   /* standard content page */
  --ch-container-lg: 1200px;  /* wide content page (tables, dashboards) */
  --ch-container-xl: 1440px;  /* editor / multi-column workspace */
  --ch-container-gutter: 24px;

  /* ---- Modal/dialog widths (replaces 15+ ad-hoc modal widths) ---- */
  --ch-modal-sm: 420px;   /* confirm dialogs, single-field prompts */
  --ch-modal-md: 640px;   /* standard forms */
  --ch-modal-lg: 960px;   /* multi-section forms (org admin, settings) */
  --ch-modal-xl: 1280px;  /* rich editors (publish content) */
  --ch-modal-gutter: 32px; /* viewport margin on small screens */

  /* ---- Control heights (replaces 8+ button/input heights) ---- */
  --ch-control-sm: 32px;
  --ch-control-md: var(--ch-control-min, 38px);
  --ch-control-lg: 44px;

  /* ---- Touch target minimum (Apple HIG / Material both use 44px) --- */
  --ch-touch-min: 44px;

  /* ---- Fluid type scale (clamp between a mobile floor and a large-
     desktop ceiling, so a 13" laptop and a 27" monitor don't render
     the exact same pixel size for headings/body text) ---- */
  --ch-text-xs:   clamp(11px, 0.7vw + 9px, 12px);
  --ch-text-sm:   clamp(12px, 0.75vw + 10px, 13px);
  --ch-text-base: clamp(13px, 0.85vw + 11px, 15px);
  --ch-text-lg:   clamp(15px, 1vw + 12px, 17px);
  --ch-text-xl:   clamp(17px, 1.3vw + 13px, 20px);
  --ch-text-2xl:  clamp(20px, 1.8vw + 14px, 26px);
  --ch-text-3xl:  clamp(24px, 2.4vw + 16px, 32px);
}

/* ---- Reusable page container ----
   Opt in with class="ch-container ch-container--md" (or sm/lg/xl).
   Centers content, applies the shared width scale and gutter. */
.ch-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--ch-container-gutter); padding-right: var(--ch-container-gutter); box-sizing: border-box; }
.ch-container--sm { max-width: var(--ch-container-sm); }
.ch-container--md { max-width: var(--ch-container-md); }
.ch-container--lg { max-width: var(--ch-container-lg); }
.ch-container--xl { max-width: var(--ch-container-xl); }
@media (max-width: 767px) { .ch-container { padding-left: 16px; padding-right: 16px; } }

/* ---- Reusable modal size classes ----
   Add alongside the existing .modal-card class, e.g.
   class="modal-card ch-modal ch-modal--md" */
.ch-modal { width: 100%; box-sizing: border-box; }
.ch-modal--sm { max-width: min(var(--ch-modal-sm), calc(100vw - var(--ch-modal-gutter))); }
.ch-modal--md { max-width: min(var(--ch-modal-md), calc(100vw - var(--ch-modal-gutter))); }
.ch-modal--lg { max-width: min(var(--ch-modal-lg), calc(100vw - var(--ch-modal-gutter))); }
.ch-modal--xl { max-width: min(var(--ch-modal-xl), calc(100vw - var(--ch-modal-gutter))); }
@media (max-width: 767px) {
  .ch-modal--sm, .ch-modal--md, .ch-modal--lg, .ch-modal--xl {
    max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
}

/* ---- Reusable control-height utilities ----
   Add to any button/input/select: class="ch-control ch-control--md" */
.ch-control { box-sizing: border-box; border-radius: var(--ch-radius-sm); }
.ch-control--sm { min-height: var(--ch-control-sm); }
.ch-control--md { min-height: var(--ch-control-md); }
.ch-control--lg { min-height: var(--ch-control-lg); }

/* ---- Touch target guarantee for mobile ----
   Add class="ch-touch" to any icon button / link-style control whose
   visible box is smaller than the tappable area should be. Uses a
   pseudo-element so the visual size of the element itself is
   untouched - only the actual hit area grows. */
.ch-touch { position: relative; }
@media (max-width: 767px) {
  .ch-touch::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: max(100%, var(--ch-touch-min)); height: max(100%, var(--ch-touch-min));
    transform: translate(-50%, -50%);
  }
}

/* ---- Fluid type utilities ----
   Add class="ch-text-xl" etc. to headings/body copy that should scale
   between screen sizes instead of using a single fixed px value. */
.ch-text-xs   { font-size: var(--ch-text-xs); }
.ch-text-sm   { font-size: var(--ch-text-sm); }
.ch-text-base { font-size: var(--ch-text-base); }
.ch-text-lg   { font-size: var(--ch-text-lg); }
.ch-text-xl   { font-size: var(--ch-text-xl); }
.ch-text-2xl  { font-size: var(--ch-text-2xl); }
.ch-text-3xl  { font-size: var(--ch-text-3xl); }