/* ==========================================================================
   Artificer Garden — Stylesheet

   Extend by:
   - Overriding tokens in :root
   - Adding rules under each section
   - Creating new component blocks at the end of §5
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Color — palette */
    --color-bg: #faf9f7;
    --color-surface: #ffffff;
    --color-text: #1a1a18;
    --color-text-muted: #5c5c58;
    --color-accent: #3d6b4f;
    --color-accent-hover: #2f5540;
    --color-border: #e4e2dd;

    /* Color — semantic */
    --color-link: var(--color-accent);
    --color-link-hover: var(--color-accent-hover);
    --color-focus: var(--color-accent);

    /* Typography — families */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

    /* Typography — scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-loose: 1.75;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* Layout */
    --content-max-width: 72rem;
    --content-narrow: 42rem;
    --page-padding: var(--space-5);

    /* Effects */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
    --transition: 150ms ease;

    /* Breakpoints (reference — use literal values in @media) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    hanging-punctuation: first last;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-link-hover);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-4xl);
}
h2 {
    font-size: var(--font-size-3xl);
}
h3 {
    font-size: var(--font-size-2xl);
}
h4 {
    font-size: var(--font-size-xl);
}
h5 {
    font-size: var(--font-size-lg);
}
h6 {
    font-size: var(--font-size-base);
}

p + p {
    margin-top: var(--space-4);
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

main {
    width: min(100% - var(--page-padding) * 2, var(--content-max-width));
    margin-inline: auto;
    padding-block: var(--space-12);
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Link cards — refined image hover buttons for the portal */
.link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.link-card img {
    width: 88px;
    height: 88px;
    filter: grayscale(100%);
    transition: filter 200ms ease;
    /* The placeholder is a small 129px logo; size is intentionally constrained */
}

.link-card:hover,
.link-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.link-card:hover img,
.link-card:focus-visible img {
    filter: grayscale(0);
}

.link-card .label {
    margin-top: var(--space-3);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Add site-specific components here, e.g.:
   .card { ... }
   .nav { ... }
   .btn { ... }
*/

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */

/* Add one-off helpers here, e.g.:
   .text-muted { color: var(--color-text-muted); }
   .visually-hidden { ... }
*/

/* --------------------------------------------------------------------------
   7. Media Queries
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: var(--font-size-3xl);
        --page-padding: var(--space-4);
    }

    main {
        padding-block: var(--space-8);
    }

    .link-grid {
        grid-template-columns: 1fr;
    }
}