/* ============================================
   m. arnoldus — design system tokens
   ============================================ */

:root {

  /* --- Color --- */
  --ma-black:        #0d0d0d;
  --ma-white:        #f0f0ee;
  --ma-gray:         #888888;
  --ma-gray-light:   #cccccc;
  --ma-gray-dark:    #444444;

  /* --- Typography --- */
  --ma-font-display: 'Twentieth Century', 'Arial Black', sans-serif;
  --ma-font-body:    'Absara', Georgia, serif;
  --ma-font-mono:    'Courier New', monospace;

  /* --- Font sizes --- */
  --ma-size-xl:    72px;
  --ma-size-l:     48px;
  --ma-size-m:     32px;
  --ma-size-s:     20px;
  --ma-size-body-l: 20px;
  --ma-size-body-m: 16px;
  --ma-size-body-s: 14px;
  --ma-size-label:  11px;

  /* --- Letter spacing --- */
  --ma-tracking-display: -0.02em;
  --ma-tracking-tight:   -0.01em;
  --ma-tracking-normal:   0em;
  --ma-tracking-label:    0.1em;
  --ma-tracking-wide:     0.04em;

  /* --- Line height --- */
  --ma-leading-display: 1.05;
  --ma-leading-tight:   1.1;
  --ma-leading-body:    1.65;
  --ma-leading-loose:   1.8;

  /* --- Spacing scale --- */
  --ma-space-1:   4px;
  --ma-space-2:   8px;
  --ma-space-3:  16px;
  --ma-space-4:  24px;
  --ma-space-5:  32px;
  --ma-space-6:  48px;
  --ma-space-7:  64px;
  --ma-space-8:  96px;
  --ma-space-9: 128px;

  /* --- Border --- */
  --ma-radius:       0px;
  --ma-border-light: 1px solid var(--ma-white);
  --ma-border-dark:  1px solid var(--ma-black);
  --ma-border-gray:  1px solid var(--ma-gray);

}


/* ============================================
   Core components
   ============================================ */

/* The Sign — core atomic unit */
.ma-sign {
  display:         inline-block;
  background:      var(--ma-black);
  color:           var(--ma-white);
  font-family:     var(--ma-font-display);
  font-weight:     900;
  text-transform:  uppercase;
  line-height:     var(--ma-leading-display);
  letter-spacing:  var(--ma-tracking-tight);
  padding:         16px 20px;
  border-radius:   var(--ma-radius);
}

.ma-sign--border {
  border: var(--ma-border-light);
}

.ma-sign--inverted {
  background: var(--ma-white);
  color:      var(--ma-black);
  border:     var(--ma-border-dark);
}

/* Wordmark */
.ma-wordmark {
  font-family:    var(--ma-font-display);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: var(--ma-tracking-display);
  line-height:    1;
}

/* Display type */
.ma-display-xl { font-size: var(--ma-size-xl); letter-spacing: var(--ma-tracking-display); line-height: var(--ma-leading-display); }
.ma-display-l  { font-size: var(--ma-size-l);  letter-spacing: var(--ma-tracking-display); line-height: var(--ma-leading-display); }
.ma-display-m  { font-size: var(--ma-size-m);  letter-spacing: var(--ma-tracking-tight);   line-height: var(--ma-leading-tight);   }
.ma-display-s  { font-size: var(--ma-size-s);  letter-spacing: var(--ma-tracking-normal);  line-height: var(--ma-leading-tight);   }

/* Body type */
.ma-body-l { font-family: var(--ma-font-body); font-size: var(--ma-size-body-l); line-height: var(--ma-leading-body); }
.ma-body-m { font-family: var(--ma-font-body); font-size: var(--ma-size-body-m); line-height: var(--ma-leading-body); }
.ma-body-s { font-family: var(--ma-font-body); font-size: var(--ma-size-body-s); line-height: var(--ma-leading-body); }

/* Label */
.ma-label {
  font-family:    var(--ma-font-display);
  font-weight:    900;
  font-size:      var(--ma-size-label);
  text-transform: uppercase;
  letter-spacing: var(--ma-tracking-label);
  color:          var(--ma-gray);
}

/* Layout defaults */
.ma-page {
  background: var(--ma-black);
  color:      var(--ma-white);
  font-family: var(--ma-font-body);
  margin: 0;
  padding: 0;
}