/* Grid, breakpoints, and the mandatory three-pane workspace shell.

   BREAKPOINT     RANGE          CONTAINER              COLS  GUTTER  MARGIN
   Mobile         < 640px        100%                   4     16px    16px
   Tablet         640-1023px     100%                   8     24px    32px
   Desktop        1024-1439px    1200px                 12    24px    64px
   Ultra-wide     >= 1440px      1440px, content-capped 12    32px    96px+
*/
:root {
  --bp-mobile: 640px; /* @kind spacing */
  --bp-tablet: 1024px; /* @kind spacing */
  --bp-desktop: 1440px; /* @kind spacing */

  --grid-columns: 4; /* @kind other */
  --grid-gutter: var(--space-4);
  --grid-margin: var(--space-4);
  --container: 100%; /* @kind spacing */

  /* ---- Three-pane workspace shell. Mandatory for every OrkaOS app. ---- */
  --shell-topnav-height: 64px; /* @kind spacing */
  --shell-sidenav-width: 268px; /* @kind spacing */
  --shell-sidenav-collapsed: 68px; /* @kind other */
  --shell-guidebar-height: 56px; /* @kind spacing */

  /* The workspace grid itself. Pane ratios are driven by these, and only these —
     collapse/expand animates grid-template-columns, never width or transform. */
  --workspace-columns: 1fr 1fr 1fr; /* @kind other */
  --workspace-gap: var(--space-3); /* @kind other */
  --workspace-padding: var(--space-3) var(--space-4) var(--space-4); /* @kind other */
  --pane-radius: var(--radius-md); /* @kind other */
  --pane-header-height: 56px; /* @kind spacing */
  --pane-body-padding: var(--space-4); /* @kind other */
  --pane-min-width: 280px; /* @kind spacing */

  /* Named pane distributions — assign to --workspace-columns */
  --workspace-equal: 1fr 1fr 1fr; /* @kind other */
  --workspace-focus-left: 2fr 1fr 1fr; /* @kind other */
  --workspace-focus-mid: 1fr 2fr 1fr; /* @kind other */
  --workspace-focus-right: 1fr 1fr 2fr; /* @kind other */
  --workspace-solo-mid: 0fr 1fr 0fr; /* @kind other */
  --workspace-two-up: 1fr 1fr 0fr; /* @kind other */
}

@media (min-width: 640px) {
  :root { --grid-columns: 8; /* @kind other */ --grid-gutter: var(--space-6); --grid-margin: var(--space-8); }
}
@media (min-width: 1024px) {
  :root { --grid-columns: 12; /* @kind other */ --grid-gutter: var(--space-6); --grid-margin: var(--space-16); --container: 1200px; }
}
@media (min-width: 1440px) {
  :root { --grid-gutter: var(--space-8); --grid-margin: var(--space-24); --container: 1440px; }
}

/* Below the tablet breakpoint the three panes stack into a swipeable single column;
   the pane-tabs strip becomes the switcher. */
@media (max-width: 1023px) {
  :root { --workspace-columns: 1fr; /* @kind other */ --workspace-padding: var(--space-3); }
}