/* Arkum Labs — Layout, Grid & Elevation Tokens
   12-column grid with vertical division as the core motif. */

:root {
  /* ---- Container widths ---- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-max: 1440px;

  /* ---- Grid ---- */
  --grid-columns: 12; /* @kind other */
  --grid-gutter:  24px;
  --grid-margin:  32px;   /* outer page margin on desktop */

  /* ---- Heights ---- */
  --navbar-h:     64px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* ---- Z-index scale ---- */
  --z-base:     0;   /* @kind other */
  --z-raised:   10;  /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-navbar:   200; /* @kind other */
  --z-dropdown: 300; /* @kind other */
  --z-overlay:  400; /* @kind other */
  --z-modal:    500; /* @kind other */
  --z-toast:    600; /* @kind other */

  /* ---- Hidden grid texture: the "obsidian panel" hairline mesh ----
     Apply as a background-image on dark sections for a faint engineered grid. */
  --grid-mesh:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px); /* @kind other */
  --grid-mesh-size: 64px 64px; /* @kind other */
}

@media (max-width: 768px) {
  :root {
    --grid-gutter: 16px;
    --grid-margin: 20px;
    --grid-columns: 4; /* @kind other */
  }
}