@font-face {
    font-family: 'Red Hat Mono';
    src: url('/fonts/RedHatMono-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Mono';
    src: url('/fonts/RedHatMono-italic-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@font-face {
    font-family: 'Agrandir';
    src: url('/fonts/Agrandir-WideMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

/* Light theme colors */
:root,
html.light {
    --primary-100: #1b1a18;
    --primary-200: #31302e;
    --primary-300: #393836;
    --primary-400: #454440;
    --primary-500: #54514d;
    --primary-600: #6a6762;
    --primary-700: #807d78;
    --primary-800: #a8a4a0;

    --secondary-100: #0c5b11;
    --secondary-200: #086c0c;
    --secondary-300: #047a0a;
    --secondary-400: #00b505;
    --secondary-500: #00cb00;
    --secondary-600: #24fb20;
    --secondary-700: #5bff53;
    --secondary-800: #9aff92;
    --secondary-900: #cbffc5;

    --accent1-100: #74117e;
    --accent1-200: #8a0e9a;
    --accent1-300: #a010c0;
    --accent1-400: #b313d0;
    --accent1-500: #9b11b3;
    --accent1-600: #c040d8;
    --accent1-700: #d070e8;
    --accent1-800: #e4a8f2;
    --accent1-900: #f3d9fa;

    /* Pastels */
    --pastel-cream: #f3f0e8;
    --pastel-lilac: #7b7bc8;
    --pastel-lime: #5a8f20;
    --pastel-peach: #c87040;

    /* Surface layers */
    --surface-0: #f5f3f0;
    --surface-1: #ffffff;
    --surface-2: #f0eeeb;
    --surface-3: #e6e4e0;

    /* Borders */
    --border-subtle: rgba(27, 26, 24, 0.10);
    --border-default: rgba(27, 26, 24, 0.18);
    --border-strong: rgba(27, 26, 24, 0.35);

    /* Gradients */
    --gradient-start: var(--accent1-400);
    --gradient-mid: var(--secondary-200);
    --gradient-end: var(--pastel-lilac);

    --bg: #f5f3f0;
    --text: var(--primary-100);
    --text-muted: var(--primary-400);
    --text-subtle: var(--primary-500);
}

/* Dark theme colors */
html.dark {
    --primary-100: #1a181f;
    --primary-200: #8a8890;
    --primary-300: #b5b3ba;
    --primary-400: #e1e0e8;

    --secondary-100: #090;
    --secondary-200: #00cb00;
    --secondary-300: #39ff14;
    --secondary-400: #e1e0e8;

    --accent1-100: #bf00ff;
    --accent1-200: #d040f0;
    --accent1-300: #e060ff;
    --accent1-400: #e1e0e8;

    /* Pastels (dark variants) */
    --pastel-cream: #2a2825;
    --pastel-lilac: #6a6ab0;
    --pastel-lime: #4a7a20;
    --pastel-peach: #7a4a28;

    /* Surface layers */
    --surface-0: var(--primary-100);
    --surface-1: #222028;
    --surface-2: #2a2830;
    --surface-3: #322f3a;

    /* Borders */
    --border-subtle: rgba(225, 224, 232, 0.08);
    --border-default: rgba(225, 224, 232, 0.15);
    --border-strong: rgba(225, 224, 232, 0.28);

    /* Gradients */
    --gradient-start: var(--accent1-200);
    --gradient-mid: var(--secondary-200);
    --gradient-end: var(--pastel-lilac);

    --bg: var(--primary-100);
    --text: var(--primary-400);
    --text-muted: var(--primary-300);
    --text-subtle: var(--primary-300);
}

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

html {
    font-family: 'Red Hat Mono', monospace;
    font-weight: 400;
    scroll-behavior: smooth;
    scrollbar-color: var(--primary-600) var(--surface-1);
    scrollbar-width: thin;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Agrandir', sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
}

::selection {
    background: var(--accent1-500);
    color: white;
}

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

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

:not(:defined) {
    visibility: hidden;
}

/* Reserve layout space for custom elements before upgrade so they don't
   collapse (inline, zero-height) and cause CLS when their shadow DOM
   renders. These match the :host display declared in each component. */
jm-layout:not(:defined),
jm-navigation:not(:defined),
jm-highlighted-text:not(:defined),
jm-gradient-divider:not(:defined),
jm-identity-pillar:not(:defined),
jm-stacked-carousel:not(:defined),
jm-section-reveal:not(:defined),
jm-project-card:not(:defined),
jm-status-dot:not(:defined),
jm-timeline-strip:not(:defined),
jm-currently-timeline:not(:defined) {
    display: block;
}

jm-cursor-follow:not(:defined) {
    display: block;
}

jm-cursor-follow[inline]:not(:defined),
jm-button:not(:defined),
jm-theme-switcher:not(:defined) {
    display: inline-block;
}

@view-transition {
    navigation: auto;
}

::view-transition-group(site-nav),
::view-transition-group(site-footer) {
    animation-duration: 0s;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}