/*--------------------------------------------------------------
# Portfolio Design System
--------------------------------------------------------------*/

/*
 * Global visual foundation:
 * typography, colors, backgrounds, spacing, layout and motion.
 *
 * Components belong in components.css.
 * Page-specific composition belongs in page stylesheets.
 */


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/*--------------------------------------------------------------
# Design Tokens
--------------------------------------------------------------*/

:root {

    /* Typography */
    --font-primary:
        "General Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-caption: 0.75rem;
    --font-size-small: 0.875rem;
    --font-size-body: 1rem;
    --font-size-lead: clamp(1rem, calc(0.75rem + 1vw), 1.25rem);

    --font-size-display: clamp(3rem, 7vw, 6rem);
    --font-size-h1: clamp(2.5rem, 6vw, 4.5rem);
    --font-size-h2: clamp(2rem, 3.5vw, 3.25rem);
    --font-size-h3: clamp(1.5rem, 2.5vw, 2.25rem);
    --font-size-h4: clamp(1.25rem, 2vw, 1.625rem);

    --line-height-body: 1.6;
    --line-height-small: 1.45;
    --line-height-heading: 1.08;


    /* Light Palette */
    --color-bg: #f4f1eb;
    --color-bg-warm: #fbf1df;
    --color-bg-soft: #f0e5d4;

    --background-light:
        radial-gradient(
            circle at 20% 24%,
            var(--color-bg-warm) 0%,
            transparent 38%
        ),
        linear-gradient(
            160deg,
            var(--color-bg) 0%,
            var(--color-bg-warm) 28%,
            var(--color-bg-soft) 58%,
            var(--color-bg-warm) 80%,
            var(--color-bg) 100%
        );

    --color-text: #1d1c1a;
    --color-text-muted: #716e68;
    --color-border: #ddd8d0;
    --color-focus: #55514b;


    /* Dark Palette */
    --color-dark-bg: #06090e;
    --color-dark-bg-mid: #060c13;
    --color-dark-bg-blue: #0d1723;

    --background-dark:
        radial-gradient(
            circle at 20% 24%,
            var(--color-dark-bg-blue) 0%,
            transparent 38%
        ),
        linear-gradient(
            160deg,
            var(--color-dark-bg) 0%,
            var(--color-dark-bg-mid) 32%,
            var(--color-dark-bg-blue) 58%,
            var(--color-dark-bg-mid) 80%,
            var(--color-dark-bg) 100%
        );

    --color-dark-text: #f4f1eb;
    --color-dark-text-muted: #a7b0bb;


    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;


    /* Layout */
    --portfolio-content-width: 1200px;
    --content-width-narrow: 820px;
    --page-padding: clamp(1.25rem, 4vw, 4rem);


    /* Radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;


    /* Motion */
    --duration-fast: 160ms;
    --duration-medium: 360ms;
    --duration-slow: 500ms;

    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

html {
    background-color: var(--color-bg);
    scroll-behavior: smooth;
}

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

body {
    margin: 0;

    background-color: var(--color-bg);
    background-image: var(--background-light);

    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-body);
}


/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--color-text);

    font-family: var(--font-primary);
    font-weight: 600;
    line-height: var(--line-height-heading);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}


/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/

p {
    margin-top: 0;
}

small,
.text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.text-semibold {
    font-weight: 600;
}

a {
    color: inherit;
}

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


/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

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

img,
video {
    height: auto;
}


/*--------------------------------------------------------------
# Interaction & Accessibility
--------------------------------------------------------------*/

::selection {
    background: #dcd6cc;
    color: var(--color-text);
}

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

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}