/* ============================================================================
   SKUBIQ — SHARED LAYOUT TOKENS
   ----------------------------------------------------------------------------
   The one place that answers "how wide is the content column?", "how much
   gutter does it get?" and "what is the spacing step?".

   Why this file exists
   --------------------
   The public site already had a layout system, but it lived inside the
   landing stylesheet and only the landing stylesheet could see it. The app
   surfaces (dashboard, admin, account, payment) hand-wrote the same two
   numbers instead: dashboard.css hardcoded `padding: 18px 20px` and
   `max-width: 1280px`, while the marketing container was 1320px with a
   gutter that grows to 56px. Nothing aligned, and every fix was a one-off
   margin someone had to remember in four places.

   So the numbers move here. Three files consume them:
     static/landing/style.css   public site + pricing
     static/css/style.css       shared app surface
     static/css/dashboard.css   dashboard / admin shell

   LOAD ORDER MATTERS. base.html links this file AFTER bootstrap.min.css, so
   the .container rule below wins over Bootstrap's own .container (identical
   specificity — later stylesheet wins). Do not move it above Bootstrap or the
   public site silently snaps back to a 1140px column at ≥1200px.

   Values are unchanged from the landing system that shipped before this file;
   nothing moves visually because of the refactor itself.
   ========================================================================= */

:root {
  /* --- Content column ---------------------------------------------------- */
  --sk-layout-max-w: 1320px;
  --sk-layout-pad-x: clamp(20px, 5vw, 56px);

  /* --- Spacing scale, 8px base -------------------------------------------
     The landing stylesheet's own --space-* tokens alias these. Anything
     added to the app surfaces should use the --sk-space-* names directly. */
  --sk-space-0:  0;
  --sk-space-1:  8px;
  --sk-space-2:  16px;
  --sk-space-3:  24px;
  --sk-space-4:  32px;
  --sk-space-5:  48px;
  --sk-space-6:  64px;
  --sk-space-7:  96px;
  --sk-space-8:  128px;

  /* --- Readability floors -------------------------------------------------
     Shared so a "compact" surface cannot quietly shrink body copy below the
     size QA signed off on. Surfaces that need to fit more in less space have
     to spend padding or width, not legibility. */
  --sk-fs-body-min: 16px;
  --sk-leading-body: 1.5;

  /* --- Breakpoints, mirrored in @media rules below -----------------------
     Custom properties cannot be used inside a media query condition, so these
     are documentation and are consumed by JS via getComputedStyle only if
     needed. Keep in sync with the queries at the bottom of this file. */
  --sk-bp-sm: 360px;
  --sk-bp-md: 768px;
  --sk-bp-lg: 1024px;
  --sk-bp-xl: 1440px;
}

/* ---------------------------------------------------------------------------
   THE CONTAINER

   Single source of truth for the left/right page edge. `width: 100%` plus a
   max-width means backgrounds set on a parent <section> can still span the
   full viewport while the content inside never exceeds --sk-layout-max-w and
   stays centred. This is what makes the logo, nav, hero copy, ticker, cards
   and footer all start at the same x position at every viewport.
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--sk-layout-max-w);
  padding-inline: var(--sk-layout-pad-x);
}

/* ---------------------------------------------------------------------------
   SHARED PAGE CONTAINER — .sk-container

   The one container every public section (landing, topbar, footer, product,
   plans, login/register) uses. Section backgrounds stay full bleed; only the
   inner content is constrained:

     width:          min(100% - 2 * gutter, max)  → never wider than --max,
                                                    and the gutter on each side
                                                    is identical at every width
     margin-inline:  auto                          → centred, so the left and
                                                    right gaps always match

   Tune the page edge in one place via the variables below. Kept separate from
   .container so the app surfaces (dashboard, admin, account) keep their own
   width.
   ------------------------------------------------------------------------ */
:root {
  --sk-container-max: 1200px;
  --sk-container-gutter: 16px;                       /* below 768px */
  --sk-container-width: min(100% - 2 * var(--sk-container-gutter), var(--sk-container-max));
}
@media (min-width: 768px) {
  :root { --sk-container-gutter: 24px; }            /* 768px and up */
}
.sk-container {
  width: var(--sk-container-width);
  margin-inline: auto;
}

/* The dashboard and admin shell are full-bleed by design (a fixed 220px
   sidebar owns the left edge there, so the content column deliberately does
   not share the marketing gutter). They still consume the same tokens for
   their own rhythm — see dashboard.css. */

@media (max-width: 767.98px) {
  .container { padding-inline: var(--sk-space-2); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .container { padding-inline: clamp(28px, 4vw, 40px); }
}

@media (min-width: 1440px) {
  .container { padding-inline: 56px; }
}