@import './fonts.css';

@import "./layers.css";

@import "./reset.css";

@import "./theme/colours.css";
@import "./theme/spacing.css";

@import "./layout/layout.css";
@import "./layout/page-header.css";
@import "./layout/page-footer.css";
@import "./layout/hero.css";

@import "./components/back-link.css";
@import "./components/card.css";
@import "./components/code.css";
@import "./components/combination.css";
@import "./components/flow-list.css";
@import "./components/highlight.css";
@import "./components/list.css";
@import "./components/note.css";
@import "./components/palette.css";
@import "./components/profile-pic.css";
@import "./components/quote.css";
@import "./components/scroll-bar.css";
@import "./components/underline.css";

@layer theme {
  body {
    background-color: var(--bg-colour);
    color: var(--text-colour);
    font-family: var(--font-family-main);
  }

  code {
    font-family: var(--font-family-mono);
  }

  :is(p, h1, h2, h3, h4, h5, h6).yellow {
    color: var(--yellow-400);
  }

  :is(p, h1, h2, h3, h4, h5, h6).yellow-dark {
    color: var(--yellow-600);
  }
}


@layer utilities {
  .centred {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--spacing-m));
    justify-content: center;
    align-items: center;
  }

  .no-gap {
    --gap: 0;
  }

  .signature {
    font-family: var(--font-family-handwritten);
    font-size: var(--font-size-step-2);
    color: var(--yellow-600);
  }

  .heart {
    color: var(--red-400);
    font-size: var(--font-size-step-4);
  }

  p.small {
    font-size: var(--font-size-step--1);
    line-height: 0.3em;
  }
}