/* ==========================================================
   WHALE OS Spacing System v1.0
   ========================================================== */

:root{

  /* Base spacing scale (8pt system) */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:56px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;

  /* Layout */
  --container-max:1680px;
  --container-padding:24px;

  --header-height:72px;
  --sidebar-width:320px;
  --rail-width:360px;

  --card-padding:24px;
  --panel-padding:20px;
  --section-gap:32px;
}

/* Margin Utilities */

.m-0{margin:0;}
.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-7{margin-top:var(--space-7);}
.mt-8{margin-top:var(--space-8);}

.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}
.mb-6{margin-bottom:var(--space-6);}
.mb-7{margin-bottom:var(--space-7);}
.mb-8{margin-bottom:var(--space-8);}

/* Padding Utilities */

.p-1{padding:var(--space-1);}
.p-2{padding:var(--space-2);}
.p-3{padding:var(--space-3);}
.p-4{padding:var(--space-4);}
.p-5{padding:var(--space-5);}
.p-6{padding:var(--space-6);}
.p-7{padding:var(--space-7);}
.p-8{padding:var(--space-8);}

.px-4{
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.py-4{
    padding-top:var(--space-4);
    padding-bottom:var(--space-4);
}

/* Gap */

.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-5{gap:var(--space-5);}
.gap-6{gap:var(--space-6);}
.gap-7{gap:var(--space-7);}
.gap-8{gap:var(--space-8);}

/* Containers */

.container{
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:var(--container-padding);
}