/* ========================================
   GLOBAL – TOKENS, FONTS, RESET, BASE
======================================== */

/* ========================================
   FONTS
======================================== */

@font-face {
  font-family: "Suisse Screen";
  src:
    url("../fonts/SuisseScreen-Regular-WebS.woff2") format("woff2"),
    url("../fonts/SuisseScreen-Regular-WebS.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Screen";
  src:
    url("../fonts/SuisseScreen-Medium-WebS.woff2") format("woff2"),
    url("../fonts/SuisseScreen-Medium-WebS.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Screen";
  src:
    url("../fonts/SuisseScreen-Bold-WebS.woff2") format("woff2"),
    url("../fonts/SuisseScreen-Bold-WebS.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Works";
  src:
    url("../fonts/SuisseWorks-Regular-WebS.woff2") format("woff2"),
    url("../fonts/SuisseWorks-Regular-WebS.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Works";
  src:
    url("../fonts/SuisseWorks-Medium-WebS.woff2") format("woff2"),
    url("../fonts/SuisseWorks-Medium-WebS.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Works";
  src:
    url("../fonts/SuisseWorks-BookItalic-WebS.woff2") format("woff2"),
    url("../fonts/SuisseWorks-BookItalic-WebS.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   RESET
======================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeLegibility;
}

main {
  display: block;
}

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

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

button {
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
}

/* ========================================
   TOKENS
======================================== */

:root {
  /* ATELIER MONO SYSTEM */
  --atelier-bg: #1e1e1e;
  --atelier-surface: #252525;
  --atelier-surface-elevated: #2b2b2b;
  --atelier-surface-soft: #303030;
  --atelier-surface-panel: rgba(255, 255, 255, 0.08);
  --atelier-line-subtle: rgba(255, 255, 255, 0.08);
  --atelier-line: rgba(255, 255, 255, 0.12);
  --atelier-line-strong: rgba(255, 255, 255, 0.18);
  --atelier-text-strong: rgba(255, 255, 255, 0.9);
  --atelier-text-muted: rgba(255, 255, 255, 0.6);
  --atelier-text-subtle: rgba(255, 255, 255, 0.42);
  --atelier-accent: rgba(255, 255, 255, 0.18);
  --atelier-accent-hover: rgba(255, 255, 255, 0.35);
  --atelier-accent-soft: rgba(255, 255, 255, 0.08);
  --atelier-overlay: rgba(0, 0, 0, 0.76);
  --atelier-overlay-soft: rgba(0, 0, 0, 0.54);
  --atelier-depth-soft: 0 0 24px rgba(255, 255, 255, 0.08);

  /* CORE COLORS */
  --color-bg: var(--atelier-bg);
  --color-surface: var(--atelier-surface);
  --color-paper: #ffffff;
  --color-line: #ffffff;
  --color-text: var(--atelier-text-strong);
  --color-text-muted: var(--atelier-text-muted);

  --color-primary: #ffffff;
  --color-secondary: #d94d99;
  --color-highlight: #fff59e;
  --color-system: #29bdad;

  --color-success: #00d973;
  --color-warning: #b85e00;
  --color-info: #0057ba;
  --color-danger: #d60036;
  --color-black: #000000;
  --color-white: #ffffff;

  /* SEMANTIC ALIASES */
  --bg-default: var(--atelier-bg);
  --bg-surface: var(--atelier-surface);
  --bg-elevated: var(--atelier-surface-elevated);
  --bg-surface-soft: var(--atelier-surface-soft);
  --bg-paper: var(--color-paper);
  --bg-paper-alt: color-mix(in srgb, var(--atelier-surface-elevated) 82%, var(--color-paper));
  --bg-overlay: var(--atelier-overlay);
  --bg-overlay-soft: var(--atelier-overlay-soft);

  --text-default: var(--atelier-text-strong);
  --text-muted: var(--atelier-text-muted);
  --text-on-paper: var(--color-bg);
  --text-on-paper-muted: color-mix(in srgb, var(--color-bg) 72%, var(--color-paper));
  --text-subtle: var(--atelier-text-subtle);

  --border-default: var(--atelier-line-subtle);
  --border-strong: var(--atelier-line-strong);
  --border-paper: var(--atelier-line-subtle);

  --accent-primary: var(--atelier-accent);
  --accent-primary-hover: var(--atelier-accent-hover);
  --accent-secondary: var(--color-secondary);
  --accent-secondary-hover: color-mix(in srgb, var(--color-secondary) 82%, var(--color-paper));
  --accent-system: var(--color-system);
  --accent-system-hover: color-mix(in srgb, var(--color-system) 82%, var(--color-paper));
  --accent-system-soft: color-mix(in srgb, var(--color-system) 12%, transparent);
  --accent-highlight: var(--color-highlight);

  --state-success: var(--color-success);
  --state-success-soft: color-mix(in srgb, var(--color-success) 18%, transparent);
  --state-warning: var(--color-warning);
  --state-warning-soft: color-mix(in srgb, var(--color-warning) 18%, transparent);
  --state-info: var(--color-info);
  --state-info-soft: color-mix(in srgb, var(--color-info) 18%, transparent);
  --state-danger: var(--color-danger);
  --state-danger-soft: color-mix(in srgb, var(--color-danger) 18%, transparent);

  --focus-ring: var(--atelier-accent-hover);
  --selection-bg: var(--atelier-accent);
  --selection-text: var(--color-white);

  /* LEGACY COMPATIBILITY */
  --bg: var(--bg-default);
  --surface: var(--bg-surface);
  --surface-soft: var(--bg-elevated);
  --paper: var(--bg-paper);
  --white: var(--color-white);
  --black: var(--color-black);
  --text: var(--text-default);
  --text-strong: var(--text-default);
  --text-inverse: var(--text-on-paper);
  --muted: var(--text-muted);
  --line: var(--border-default);
  --line-strong: var(--border-strong);
  --accent: var(--accent-primary);
  --accent-soft: var(--atelier-accent-soft);
  --accent-secondary-soft: color-mix(in srgb, var(--accent-secondary) 16%, transparent);
  --system-soft: var(--accent-system-soft);
  --danger: var(--state-danger);
  --danger-soft: var(--state-danger-soft);
  --success: var(--state-success);
  --success-soft: var(--state-success-soft);
  --warning: var(--state-warning);
  --warning-soft: var(--state-warning-soft);
  --info: var(--state-info);
  --info-soft: var(--state-info-soft);

  /* GLOBAL PALETTE */
  /* Pink / Red */
  --palette-hermosa-pink: #ffb3f0;
  --palette-corinthian-pink: #ffa6d9;
  --palette-cameo-pink: #e6adcf;
  --palette-fawn: #d1b0b3;
  --palette-light-brown-drab: #b08699;
  --palette-coral-red: #ff7399;
  --palette-fresh-color: #ff788c;
  --palette-grenadine-pink: #ff616b;
  --palette-eosine-pink: #ff5ec4;
  --palette-spinel-red: #ff4dc9;
  --palette-old-rose: #d94d99;
  --palette-eugenia-red-a: #ed3d66;
  --palette-eugenia-red-b: #e62e73;
  --palette-raw-sienna: #b85e00;
  --palette-vinaceous-tawny: #c74300;
  --palette-jasper-red: #fa2b00;
  --palette-spectrum-red: #f20000;
  --palette-red-orange: #e81900;
  --palette-etruscan-red: #c9303e;
  --palette-burnt-sienna: #a93400;
  --palette-ochre-red: #a7374b;
  --palette-scarlet: #d50c42;
  --palette-carmine: #d60036;
  --palette-indian-lake: #cc1a97;
  --palette-rosolanc-purple: #b319ab;
  --palette-pomegranite-purple: #b90078;
  --palette-hydrangea-red: #9e194d;
  --palette-brick-red: #a32100;
  --palette-carmine-red: #a10b2b;
  --palette-pompeian-red: #a90636;
  --palette-red: #a10045;
  --palette-brown: #6c2b11;
  --palette-hay-s-russet: #681916;
  --palette-vandyke-red: #740909;
  --palette-pansy-purple: #6f0043;
  --palette-pale-burnt-lake: #730f1f;
  --palette-violet-red: #3d0079;
  --palette-vistoris-lake: #5c2c45;

  /* Yellow / Earth */
  --palette-sulpher-yellow: #f5f5b8;
  --palette-pale-lemon-yellow: #fff59e;
  --palette-naples-yellow: #faed8f;
  --palette-ivory-buff: #ebd999;
  --palette-seashell-pink: #ffcfc4;
  --palette-light-pinkish-cinnamon: #ffbf99;
  --palette-pinkish-cinnamon: #f2ad78;
  --palette-cinnamon-buff: #ffbf6e;
  --palette-cream-yellow: #ffb852;
  --palette-golden-yellow: #fa9442;
  --palette-vinaceous-cinnamon: #f59994;
  --palette-ochraceous-salmon: #d99e73;
  --palette-isabella-color: #c3a55c;
  --palette-maple: #c2975a;
  --palette-olive-buff: #bcd382;
  --palette-ecru: #c0b490;
  --palette-yellow: #ffff00;
  --palette-lemon-yellow: #f2ff26;
  --palette-apricot-yellow: #ffe600;
  --palette-pyrite-yellow: #c4bf33;
  --palette-olive-ocher: #d1bd19;
  --palette-yellow-ocher: #e0b81f;
  --palette-orange-yellow: #ffab00;
  --palette-yellow-orange: #ff8c00;
  --palette-apricot-orange: #ff7340;
  --palette-orange: #ff5200;
  --palette-peach-red: #ff3319;
  --palette-english-red: #de4500;
  --palette-cinnamon-rufous: #c2612c;
  --palette-orange-rufous: #c05200;
  --palette-sulphine-yellow: #baa600;
  --palette-khaki: #b68400;
  --palette-citron-yellow: #a6d40d;
  --palette-buffy-citrine: #888d2a;
  --palette-dark-citrine: #7e8743;
  --palette-light-grayish-olive: #76844e;
  --palette-krongbergs-green: #759243;
  --palette-olive: #718600;
  --palette-orange-citrine: #8c6510;
  --palette-sudan-brown: #9b5348;
  --palette-olive-green: #58771e;
  --palette-light-brownish-olive: #706934;
  --palette-deep-grayish-olive: #505423;
  --palette-pale-raw-umber: #5e4017;
  --palette-sepia: #503d00;
  --palette-madder-brown: #651300;
  --palette-mars-brown-tobacco: #522000;
  --palette-vandyke-brown: #362304;

  /* Green / Blue */
  --palette-turquoise-green: #b5ffc2;
  --palette-glaucous-green: #b3e8c2;
  --palette-dark-greenish-glaucous: #b3d9a3;
  --palette-yellow-green: #a6ff47;
  --palette-light-green-yellow: #bdf226;
  --palette-night-green: #7aff00;
  --palette-olive-yellow: #99b333;
  --palette-artemesia-green: #65a98f;
  --palette-andover-green: #5c8a73;
  --palette-rainette-green: #85b857;
  --palette-pistachio-green: #56aa69;
  --palette-sea-green: #33ff7d;
  --palette-benzol-green: #00d973;
  --palette-light-porcelain-green: #23c17c;
  --palette-green: #40c945;
  --palette-dull-viridian-green: #19cc33;
  --palette-oil-green: #6ea900;
  --palette-diamine-green: #1b8e13;
  --palette-cossack-green: #328e13;
  --palette-lincoln-green: #405416;
  --palette-blackish-olive: #324e2a;
  --palette-deep-slate-olive: #172713;
  --palette-nile-blue: #bfffe6;
  --palette-pale-king-s-blue: #abf5ed;
  --palette-light-glaucous-blue: #a6e6db;
  --palette-salvia-blue: #96bfe6;
  --palette-cobalt-green: #94ff94;
  --palette-calamine-blue: #80ffcc;
  --palette-venice-green: #6bffb3;
  --palette-cerulian-blue: #29bdad;
  --palette-peacock-blue: #00cf91;
  --palette-green-blue: #2dbc94;
  --palette-olympic-blue: #4f8fe6;
  --palette-blue: #0d75ff;
  --palette-antwarp-blue: #008aa1;
  --palette-helvetia-blue: #0057ba;
  --palette-dark-medici-blue: #417777;
  --palette-dusky-green: #00592e;
  --palette-deep-lyons-blue: #0024cc;
  --palette-violet-blue: #202d85;
  --palette-vandar-poel-s-blue: #003e83;
  --palette-dark-tyrian-blue: #0d2b52;
  --palette-dull-violet-black: #06004f;
  --palette-deep-indigo: #000831;
  --palette-deep-slate-green: #0f261f;

  /* Violet / Neutral */
  --palette-grayish-lavender-a: #b8b8ff;
  --palette-grayish-lavender-b: #bfabcc;
  --palette-laelia-pink: #cc85d1;
  --palette-lilac: #b875eb;
  --palette-eupatorium-purple: #bf36e0;
  --palette-light-mauve: #9161f2;
  --palette-aconite-violet: #9c52f2;
  --palette-dull-blue-violet: #6e66d4;
  --palette-dark-soft-violet: #4d52de;
  --palette-blue-violet: #4733ff;
  --palette-purple-drab: #754260;
  --palette-deep-violet-plumbeous: #5c7287;
  --palette-veronia-purple: #7e3075;
  --palette-dark-slate-purple: #53225c;
  --palette-taupe-brown: #6b2e63;
  --palette-violet-carmine: #531745;
  --palette-violet: #2619d1;
  --palette-red-violet: #3400a3;
  --palette-cotinga-purple: #340059;
  --palette-dusky-madder-violet: #2d0060;
  --palette-white: #ffffff;
  --palette-neutral-gray: #b5d1cc;
  --palette-mineral-gray: #9fc2b2;
  --palette-warm-gray: #9cb29e;
  --palette-slate-color: #1b3644;
  --palette-black: #000000;

  /* FONTS */
  --font-ui: "Suisse Screen", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Suisse Works", Georgia, serif;

  /* TYPE SCALE */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2.25rem;
  --text-2xl: 3.5rem;
  --text-3xl: 5rem;

  --heading-1: clamp(2.8rem, 6vw, 5rem);
  --heading-2: clamp(2rem, 3.6vw, 3rem);
  --heading-3: clamp(1.15rem, 2vw, 1.35rem);

  /* LINE HEIGHT */
  --lh-tight: 1.02;
  --lh-title: 1.08;
  --lh-body: 1.62;
  --lh-loose: 1.72;

  /* WIDTHS */
  --page-max-width: 1440px;
  --content-max-width: 1180px;
  --content-narrow-width: 820px;

  /* LAYOUT */
  --gutter: 32px;
  --section-space: 96px;
  --grid-gap: 24px;

  /* MEASURES */
  --measure-title: 12ch;
  --measure-text-narrow: 42ch;
  --measure-text: 68ch;
  --measure-wide: 1120px;

  /* SPACING */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* RADII */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --pill-radius: 999px;

  /* CONTROLS */
  --control-height: 54px;

  /* MOTION */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-mid: 260ms;
  --dur-slow: 420ms;

  /* SHADOWS */
  --shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 24px 54px rgba(0, 0, 0, 0.24);
  --shadow-overlay: 0 32px 80px rgba(0, 0, 0, 0.34);
}

/* ========================================
   BASE
======================================== */

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
}

strong,
b {
  font-weight: 500;
}

em,
i {
  font-style: italic;
}

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

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

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

a:hover,
a:focus-visible {
  opacity: 0.88;
}

/* ========================================
   TYPOGRAPHY
======================================== */

.nav-link,
.button,
.btn,
.eyebrow,
.badge,
.tag,
.footer-title,
.brand-mark,
label {
  font-family: var(--font-ui);
  font-weight: 400;
}

h1,
.display,
.page-title {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
}

h2,
h3,
h4,
h5,
h6,
.section-title,
.about-title,
.project-title,
.brand-name,
.card h3,
.card h4,
.cv-block h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
}

p,
li,
blockquote,
input,
textarea,
select,
.page-intro,
.project-excerpt,
.content-block p,
.content-block li,
.about-copy p,
.hero-text p,
.cv-block p,
.contact-block p,
.legal-page p,
.legal-page li,
.tagline,
.platform-tagline {
  font-family: var(--font-body);
  font-weight: 400;
}

input,
textarea,
select {
  font-size: var(--text-base);
}

h1 {
  font-size: var(--heading-1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--heading-2);
  line-height: var(--lh-title);
}

h3 {
  font-size: var(--heading-3);
  line-height: 1.15;
}

p {
  color: var(--text);
}

p + p {
  margin-top: 1em;
}

/* ========================================
   UTILITIES
======================================== */

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.is-muted {
  opacity: 0.58;
}

.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}