/* Source : catalogue Claude Design, variante Soft pastel validée. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
    color-scheme: light;
    --font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: ui-monospace, Menlo, monospace;
    --regular: 400;
    --bold: 700;
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-secondary: 13px;
    --text-description: 13.5px;
    --text-label: 15px;
    --text-body: 16px;
    --text-icon: 18px;
    --text-name: 2rem;
    --text-name-mobile: var(--text-name);
    --text-heading: 1.4rem;
    --leading-tight: 1.25;
    --leading-copy: 1.55;
    --tracking-name: -.04em;
    --tracking-heading: -.02em;
    --zero: 0;
    --space-2: 2px;
    --space-3: 3px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-30: 30px;
    --space-32: 32px;
    --space-34: 34px;
    --space-40: 40px;
    --space-48: 48px;
    --space-54: 54px;
    --space-64: 64px;
    --space-72: 72px;
    --border-width: 1px;
    --focus-width: 2px;
    --radius-tile: 18px;
    --radius-mobile: 16px;
    --radius-field: 12px;
    --radius-icon: 10px;
    --radius-button: 8px;
    --radius-round: 50%;
    --profile-width: 300px;
    --avatar-size: 224px;
    --avatar-mobile: 148px;
    --footer-logo-width: 120px;
    --error-page-width: 700px;
    --error-art-width: 400px;
    --error-stroke: 5px;
    --contact-compact-size: 44px;
    --portrait-border: 5px;
    --portrait-shadow: 0 10px 30px rgba(99,102,241,.16), 0 2px 8px rgba(26,32,44,.08);
    --portrait-ring: linear-gradient(135deg, #C7D2FE, #FBCFE8, #BAE6FD);
    --text-metric: 42px;
    --text-metric-min: 24px;
    --editor-tools-height: 72px;
    --danger: #A92332;
    --bio-mobile-width: 320px;
    --grid-width: 772px;
    --page-width: 1232px;
    --mobile-width: 560px;
    --bg: #FFFFFF;
    --tile: #FFFFFF;
    --line: #ECEFF3;
    --text: #1A202C;
    --muted: #5B6577;
    --subtle: #F3F5F8;
    --ph-a: #F3F5F8;
    --ph-b: #EAEEF3;
    --sh: 0 1px 2px rgba(26,32,44,.05), 0 6px 18px rgba(26,32,44,.06);
    --sh-hover: 0 4px 10px rgba(26,32,44,.07), 0 18px 36px rgba(26,32,44,.10);
    --accent: #1A202C;
    --accent-ink: #FFFFFF;
    --accent-soft: #EEF0FF;
    --dots: radial-gradient(circle at 1px 1px, rgba(15,23,42,.1) 1.1px, transparent 1.4px);
    --tile-base: rgba(26,32,44,.7);
    --tint-text: #0F172A;
    --tint-muted: #475569;
    --tint-subtle: rgba(255,255,255,.65);
    --tint-ph-a: rgba(15,23,42,.04);
    --tint-ph-b: rgba(15,23,42,.09);
    --white: #FFFFFF;
    --black: #000000;
    --transparent: transparent;
    --dialog-backdrop: rgba(0,0,0,.55);
    --youtube: #CC0000;
    --linkedin: #0A66C2;
    --instagram: #C13584;
    --facebook: #0866FF;
    --github: #181717;
    --spotify: #1DB954;
    --contact-icon-bg: #DBEAFE;
    --contact-icon-ink: #1D4ED8;
    --dark-ph-a: #26262A;
    --dark-ph-b: #2E2E32;
    --dark-ph-text: #A3A3A8;
    --video-scrim: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
    --play-bg: rgba(255,255,255,.94);
    --play-ink: #111111;
    --play-shadow: 0 6px 20px rgba(0,0,0,.3);
    --sky-100: #E0F2FE; --sky-200: #BAE6FD; --sky-500: #0EA5E9;
    --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-500: #F43F5E;
    --pink-100: #FCE7F3; --pink-200: #FBCFE8; --pink-500: #EC4899;
    --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-500: #3B82F6;
    --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-500: #64748B;
    --amber-100: #FEF3C7; --amber-200: #FDE68A; --amber-500: #F59E0B;
    --emerald-100: #D1FAE5; --emerald-200: #A7F3D0; --emerald-500: #10B981;
    --violet-100: #EDE9FE; --violet-200: #DDD6FE; --violet-500: #8B5CF6;
    --orange-100: #FFEDD5; --orange-200: #FED7AA; --orange-500: #F97316;
    --indigo-100: #E0E7FF; --indigo-200: #C7D2FE; --indigo-500: #6366F1;
    --teal-100: #CCFBF1; --teal-200: #99F6E4; --teal-500: #14B8A6;
    --lime-100: #ECFCCB; --lime-200: #D9F99D; --lime-500: #84CC16;
    --hover-transform: translateY(-3px);
    --motion: .22s cubic-bezier(.2,.7,.3,1);
}
.tile {
    --tile-tint: color-mix(in srgb, var(--hue-100) 70%, transparent);
    --tile-line: var(--hue-200);
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #11151C; --tile: #1A202C; --line: #262D3A; --text: #F1F5F9; --muted: #94A3B8;
        --subtle: #232A37; --ph-a: #1E2430; --ph-b: #252C39;
        --sh: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.25);
        --sh-hover: 0 4px 10px rgba(0,0,0,.4), 0 18px 36px rgba(0,0,0,.35);
        --portrait-shadow: 0 10px 30px rgba(0,0,0,.4), 0 2px 8px rgba(99,102,241,.18);
        --portrait-ring: linear-gradient(135deg, #6366F1, #A85587, #387DA6);
        --danger: #FDA4AF;
        --accent: #F1F5F9; --accent-ink: #1A202C; --accent-soft: #2A3242;
        --dots: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1.1px, transparent 1.4px);
        --tint-text: #F1F5F9; --tint-muted: #CBD5E1; --tint-subtle: rgba(255,255,255,.08);
        --tint-ph-a: rgba(255,255,255,.03); --tint-ph-b: rgba(255,255,255,.07);
    }
    .tile {
        --tile-tint: color-mix(in oklab, var(--hue-500) 16%, var(--tile-base));
        --tile-line: color-mix(in oklab, var(--hue-500) 34%, var(--tile));
    }
}