/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inconsolata:wght@400;500;700&display=swap');

/* Since we use rem units throughout, the font-size of the html element
   is the base unit of the entire design system. Changing this value will
   change not only all font sizes but also all margins, paddings etc.
*/
html {
    font-size: 16px;  /* Base size, can be adjusted per-app */
}

/* Default Font */
* {
    font-family: 'Inconsolata', monospace;
}

/* Typography Scale (using golden ratio) */
:root {
    --font-size-s:  var(--golden-m);      /* 1.000rem - Small text */
    --font-size-m:  var(--golden-l);      /* 1.272rem - Body text */
    --font-size-l:  var(--golden-xl);     /* 1.618rem - Headings */
    --font-size-xl: var(--golden-xxl);    /* 2.618rem - Page titles */
}

/* Paragraphs */
p {
    font-size: var(--font-size-m);
    line-height: var(--font-size-l);      /* Golden ratio line height */
    margin: 0;
    margin-top: var(--golden-xs);
}

/* UI Elements (smaller text) */
.main-menu, .flash, button, th, td {
    font-size: var(--font-size-s);
}

/* Headings */
h1, h2, h3 {
    font-family: "Crete Round", serif;    /* Serif for headings */
    font-weight: 400;
    font-size: var(--font-size-l);
    line-height: var(--font-size-l);
    margin: 0;
    margin-bottom: var(--font-size-s);
    padding: 0;
}

/* Page Title */
main > h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--font-size-xl);
    text-align: center;
}

/* Links */
a, button.table-button {
    text-decoration-line: underline;
    text-decoration-skip-ink: none;       /* Precise underlines */
    text-decoration-thickness: 2px;
    text-decoration-color: var(--alt-pink);
    font-weight: 700;
    color: var(--black);
    padding-bottom: 0;

    &:hover {
        text-decoration-color: var(--pink);
    }
}

/* Lists */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Links in cards (no underline on card content) */
a .card h1, a .card p {
    text-decoration: none;
}