@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Inter Display';
    src: url('../fonts/inter/InterDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {

    /* Color primitives */

    --color-gray-0: #ffffff;
    --color-gray-50: #f7f7f7;
    --color-gray-100: #ededed;
    --color-gray-200: #dedede;
    --color-gray-300: #c8c8c8;
    --color-gray-400: #adadad;
    --color-gray-500: #929292;
    --color-gray-600: #777777;
    --color-gray-700: #5e5e5e;
    --color-gray-800: #454545;
    --color-gray-900: #2f2f2f;
    --color-gray-950: #1c1c1c;
    --color-gray-1000: #000000;

    --color-red-50: #fff1f1;
    --color-red-100: #ffe1e1;
    --color-red-200: #ffc7c7;
    --color-red-300: #ffa0a0;
    --color-red-400: #f96b6c;
    --color-red-500: #d60d0e;
    --color-red-600: #bd0b0c;
    --color-red-700: #9d0c0d;
    --color-red-800: #811314;
    --color-red-900: #6b1718;
    --color-red-950: #3b0708;

    /* Semantic colors */

    --color-text-primary: var(--color-gray-1000);
    --color-text-secondary: var(--color-gray-500);
    --color-text-link: var(--color-red-500);
    --color-text-link-active: var(--color-red-700);
    --color-text-white: var(--color-gray-0);
    --color-text-black: var(--color-gray-1000);

    --color-floor-0: var(--color-gray-0);
    --color-floor-1: var(--color-gray-100);
    
    /* Font sizes */

    --font-body-sm: 400 14px/20px 'Inter', sans-serif;
    --font-body-sm-accent: 700 14px/20px 'Inter', sans-serif;
    --font-body: 400 16px/24px 'Inter', sans-serif;
    --font-body-accent: 700 16px/24px 'Inter', sans-serif;
    --font-body-lg: 400 18px/26px 'Inter', sans-serif;
    --font-body-lg-accent: 700 18px/26px 'Inter', sans-serif;
    --font-heading-2: 700 20px/28px 'Inter Display', sans-serif;
    --letter-spacing-heading-2: -0.01em;
    --font-heading-1: 700 32px/40px 'Inter Display', sans-serif;
    --letter-spacing-heading-1: -0.017em;

    /* Spacing */

    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background-repeat: no-repeat;
    background-position: center;
}

*,
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font: var(--font-body);
    text-rendering: optimizeLegibility;
    color: var(--color-text-primary);
}

h1 {
    font: var(--font-heading-1);
    letter-spacing: var(--letter-spacing-heading-1);
}

h2 {
    font: var(--font-heading-2);
    letter-spacing: var(--letter-spacing-heading-2);
}

ul,
ol {
    list-style: none;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    cursor: pointer;
    appearance: none;
}

textarea {
    resize: vertical;
    width: 100%;
    resize: none;
}

input[type='text'],
input[type='password'],
textarea {
    background-color: var(--color-floor-1);
    font: var(--font-body);
    color: var(--color-text-primary);

    &:focus {
        outline: none;
    }
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset {
    min-width: 0;
    border: 0;
}

iframe {
    border: 0;
}

.header {
}

.header__floor {
    padding: var(--spacing-4);
}

.header__floor--brand {

}

.header__floor--nav {

}

.header__floor--nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.header__floor--nav a:hover {

}

.header__floor--nav a[aria-current='page'] {

}

.header__floor--heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.header__logo {
    font: var(--font-heading-2);
    letter-spacing: var(--letter-spacing-heading-2);
}

.header__heading {
}

.header__status {

}

.country-list {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4);
    background-color: var(--color-floor-1);
    min-height: 100vh;
}

.country-list__item {
    display: flex;
    justify-content: space-between;
}

.country-list__name {

}

.country-list__name a:hover {

}

.country-list__meta {
  color: var(--color-text-secondary);
}

.message {
    
}

.summary {

}

.import-results {

}

.import-form {
    padding: 0 var(--spacing-4);
}

.import-form__field {

}

.import-form__textarea {
    width: 100%;
    padding: var(--spacing-3);
}

.import-form__textarea:focus-visible {

}

.import-form__submit {
    
}

.import-form__submit:hover {
    
}

.import-form__submit:active {
    
}

.import-form__submit:focus-visible {
    
}

.coin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
    padding: var(--spacing-4);
}

.coin-card {
    display: grid;
    align-content: start;
    overflow: hidden;
}

.coin-card__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
}

.coin-card__image {
    display: grid;
    place-items: center;
    min-width: 0;
}

.coin-card__image-link {
    width: 100%;
}

.coin-card__image-link img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.coin-card__image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
}

.coin-card__name {
}

.coin-card__years {
}

.coin-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
}

.coin-card__actions button {
}

.coin-card__actions button:hover {
}

.coin-card__actions .primary {
}

.coin-card__actions .primary:hover {
    
}

.coin-card__actions .primary:active {
    
}

.coin-card__actions .danger {
    
}

.coin-card__actions .danger:hover {
    
}

.coin-card__actions button:focus-visible {
    
}

.coin-card__actions button:disabled {
    
}

.collection-status {
    
}