/* kanagawa nvim colors */
:root {
  --fg-1: #dcd7ba;
  --fg-2: #c8c093;
  --bg-1: #16161d;
  --bg-2: #1f1f28;
  --bg-3: #2a2a37;
  --bg-4: #363646;
  --bg-5: #54546d;
  --grey-1: #727169;
  --grey-2: #717c7c;
  --pink-1: #d27e99;
  --red-1: #43242b;
  --red-2: #c34043;
  --red-3: #e82424;
  --red-4: #e46876;
  --red-5: #ff5d62;
  --yellow-1: #49443c;
  --yellow-2: #dca561;
  --yellow-3: #ff9e3b;
  --yellow-4: #938056;
  --yellow-5: #c0a36e;
  --yellow-6: #e6c384;
  --blue-1: #223249;
  --blue-2: #2d4f67;
  --blue-3: #252535;
  --blue-4: #6a9589;
  --blue-5: #658594;
  --blue-6: #7e9cd8;
  --blue-7: #7fb4ca;
  --blue-8: #a3d4d5;
  --blue-9: #7aa89f;
  --green-1: #2b3328;
  --green-2: #76946a;
  --green-3: #98bb6c;
  --orange-1: #ffa066;
  --purple-1: #938aa9;
  --purple-2: #957fb8;

  --color-page-background: var(--bg-1);
  --color-surface: var(--bg-2);
  --color-surface-raised: var(--bg-3);
  --color-surface-hover: var(--bg-4);

  --color-text: var(--fg-1);
  --color-text-muted: var(--fg-2);
  --color-on-action: var(--bg-1);

  --color-heading: var(--green-2);
  --color-subheading: var(--purple-2);
  --color-card-heading: var(--pink-1);

  --color-link: var(--blue-7);
  --color-link-hover: var(--blue-8);
  --color-action: var(--blue-7);
  --color-action-hover: var(--blue-8);

  --color-accent: var(--yellow-3);
  --color-focus: var(--yellow-3);

  --color-status-planned: var(--blue-7);
  --color-status-active: var(--yellow-3);
  --color-status-complete: var(--green-3);

  --color-glow-yellow: var(--yellow-3);
  --color-glow-purple: var(--purple-2);
  --color-glow-green: var(--green-2);

  --color-card-border: var(--yellow-5);
  --color-card-border-hover: var(--yellow-3);

  --text-title: clamp(36px, 5vw, 48px);
  --text-hero: clamp(40px, 8vw, 72px);

  --font-body: "JetBrains", monospace;
  --font-display: "Pixelify", monospace;
  --font-brand: "Pirata", serif;

  --text-small: 14px;
  --text-compact: 16px;
  --text-body: 18px;
  --text-subheading: 24px;
  --text-heading: 32px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  --page-width: 1200px;
  --reading-width: 70ch;

  --line-height-body: 1.6;
  --line-height-reading: 1.7;
  --line-height-heading: 1.2;

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;

  --color-surface-translucent: color-mix(
    in srgb,
    var(--color-surface) 85%,
    transparent
  );
}

@font-face {
  font-family: "JetBrains";
  src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pirata";
  src: url("/fonts/PirataOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pixelify";
  src: url("/fonts/PixelifySans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}