/* ============================================================
   tokens.css — Design System Custom Properties
   Partage Dossier Website
   Brand: nietzoetmaarbitter (nzmb.nl)
   ============================================================ */

/* ── Box-sizing reset ─────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── @font-face: Merriweather ─────────────────────────────── */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── @font-face: Fira Sans Condensed ─────────────────────── */
@font-face {
  font-family: 'Fira Sans Condensed';
  src: url('../fonts/FiraSansCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans Condensed';
  src: url('../fonts/FiraSansCondensed-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   :root — All design tokens
   ============================================================ */
:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:              #000000;
  --color-surface:         #653f12;
  --color-brown:           #5e3b15;   /* brand primary */
  --color-blue:            #1d7fab;   /* brand secondary */

  --color-text:            #ffffff;
  --color-text-muted:      #999999;
  --color-text-inverted:   #000000;

  --color-border:          #272727;

  --color-accent:          #fe6e00;   /* CTA / links / focus */
  --color-accent-hover:    #e55e00;

  --color-danger:          #ff2a13;
  --color-success:         #16a085;
  --color-warning:         #ffa500;
  --color-info:            #1a81ad;

  /* Semantic aliases */
  --color-link:            var(--color-accent);
  --color-focus:           var(--color-accent);
  --color-cta:             var(--color-accent);
  --color-cta-hover:       var(--color-accent-hover);

  /* ── Typography: font families ──────────────────────────── */
  --font-heading:          'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:             'Fira Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-mono:             'Courier New', Courier, monospace;

  /* ── Typography: size scale ─────────────────────────────── */
  --text-xs:               12px;
  --text-sm:               14px;   /* caption */
  --text-base:             16px;   /* body */
  --text-md:               18px;
  --text-lg:               20px;
  --text-xl:               24px;
  --text-2xl:              28px;
  --text-3xl:              3rem;   /* h2 */
  --text-4xl:              42px;   /* h3 */
  --text-5xl:              54px;   /* h1 */
  --text-hero:             clamp(2.5rem, 5vw + 1rem, 4rem);

  /* ── Typography: weight ─────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* ── Typography: line heights ───────────────────────────── */
  --leading-tight:         1.2;
  --leading-snug:          1.35;
  --leading-normal:        1.5;
  --leading-relaxed:       1.7;

  /* ── Typography: letter spacing ─────────────────────────── */
  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.05em;
  --tracking-wider:        0.1em;

  /* ── Spacing (4px base grid) ────────────────────────────── */
  --space-0:    0px;
  --space-1:    2px;
  --space-2:    4px;
  --space-3:    6px;
  --space-4:    8px;
  --space-5:    10px;
  --space-6:    12px;
  --space-7:    14px;
  --space-8:    16px;
  --space-9:    18px;
  --space-10:   20px;
  --space-11:   22px;
  --space-12:   24px;
  --space-16:   32px;
  --space-20:   40px;
  --space-24:   48px;
  --space-32:   64px;
  --space-48:   96px;

  /* Semantic spacing */
  --space-xs:   var(--space-2);   /* 4px */
  --space-sm:   var(--space-4);   /* 8px */
  --space-md:   var(--space-8);   /* 16px */
  --space-lg:   var(--space-12);  /* 24px */
  --space-xl:   var(--space-16);  /* 32px */
  --space-2xl:  var(--space-24);  /* 48px */
  --space-3xl:  var(--space-32);  /* 64px */
  --space-4xl:  var(--space-48);  /* 96px */

  /* ── Border radius ──────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   9px;
  --radius-2xl:  1em;
  --radius-full: 100em;   /* pill */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-flat:    inset 0 .1em .35em #00000059, 0 1px #fffffff2;
  --shadow-raised:  0 .15em .625em #00000037;
  --shadow-float:   0 5px 10px #0003;
  --shadow-overlay: 5px 5px 35px 0em rgb(0, 0, 0);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration + easing split (for composing with transform, opacity, etc.) */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --ease-default:    ease;
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Layout ─────────────────────────────────────────────── */
  --layout-max-width:     978px;    /* nzmb.nl canonical content width */
  --layout-wide-width:    1400px;   /* 3-column dossier layout max */
  --layout-sidebar-width: 220px;    /* left navigation sidebar */
  --layout-panel-width:   400px;    /* right detail panel */

  /* Gutters / padding */
  --layout-gutter:        var(--space-8);   /* 16px */
  --layout-gutter-lg:     var(--space-12);  /* 24px */
  --layout-section-gap:   var(--space-24);  /* 48px */
}

/* ============================================================
   Base body styles
   ============================================================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}