/* ============================================================
   COLORS & TYPE — Design Tokens
   Stefan Schindele · stefanschindele.com
   Source of truth. Do not modify without design sign-off.
   ============================================================ */

/* — Font Faces — */

@font-face {
  font-family: "Cordier";
  src: url("fonts/CordierScript-Linked.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("fonts/TTNorms-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("fonts/TTNorms-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("fonts/TTNorms-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("fonts/TTNorms-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("fonts/TTNorms-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* — Font Stacks — */

:root {
  --font-display: "Cordier", "Big Shoulders Display", "TT Norms", sans-serif;
  --font-sans: "TT Norms", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* — Color Tokens — Dark Mode (Default) — */

:root,
[data-theme="dark"] {
  --bg:          #000000;
  --fg:          #CCC8B9;
  --fg-muted:    #9A968A;
  --scarlet:     #F5332C;
  --surface:     #111111;
  --surface-alt: #1A1A1A;
  --border:      #2A2A2A;
  --border-accent: #F5332C;

  /* Functional */
  --success:     #5C7C5A;
  --warning:     #C49A3F;
  --error:       #F5332C;
  --info:        #6F8A9B;
}

/* — Color Tokens — Light Mode — */

[data-theme="light"] {
  --bg:          #CCC8B9;
  --fg:          #000000;
  --fg-muted:    #4A4740;
  --scarlet:     #F5332C;
  --surface:     #B8B4A6;
  --surface-alt: #C2BEB0;
  --border:      #A8A497;
  --border-accent: #F5332C;

  /* Functional */
  --success:     #5C7C5A;
  --warning:     #C49A3F;
  --error:       #F5332C;
  --info:        #6F8A9B;
}

/* — Spacing Scale (8 px basis) — */

:root {
  --space-xs:   4px;
  --space-s:    8px;
  --space-m:    16px;
  --space-l:    24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;
}

/* — Typography Scale — */

:root {
  --text-xs:    13px;
  --text-s:     15px;
  --text-body:  17px;
  --text-l:     20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  --leading-tight:  1.2;
  --leading-body:   1.55;
  --leading-loose:  1.8;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.10em;
  --tracking-wider:    0.15em;
}

/* — Animation — */

:root {
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro: 160ms;
  --duration-std:   320ms;
  --duration-layout: 600ms;
  --duration-theme: 400ms;
}

/* — Layout — */

:root {
  --container-max:  1280px;
  --prose-max:      760px;
  --gutter:         24px;
}

/* — Reduced Motion — */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro:  0ms;
    --duration-std:    0ms;
    --duration-layout: 0ms;
    --duration-theme:  0ms;
  }
}