@import "https://unpkg.com/open-props@1.7.23/open-props.min.css";

/* Urban Concept tokens — Utopia fluid range: 360px to 1440px. */
:root {
  --size-0: 0rem;
  --color-ink: #2b2119;
  --color-cream: #f2ece2;
  --color-gold: #d0ab63;
  --color-gold-soft: #ecd7a6;
  --color-gold-deep: #a97e34;
  --color-wine: #e9dfd1;
  --color-line: rgb(169 126 52 / 24%);
  --color-paper: rgb(255 255 255 / 54%);
  --color-muted: rgb(43 33 25 / 72%);
  --color-on-dark: #2b2119;
  --color-paper-hover: rgb(255 255 255 / 76%);
  --color-muted-on-light: #6b5947;
  --color-focus: #f2c66d;
  --color-status-error: #ffd1c7;
  --color-light-ink: #241a12;
  --color-light-gold: #a97e34;
  --color-light-gold-soft: #8a6320;
  --color-light-surface: #f6f0e4;
  --color-light-surface-deep: #efe7d7;
  --color-hero-ink: #fffaf2;
  --color-hero-muted: rgb(255 250 242 / 82%);
  --color-page-canvas: #fffdf9;
  --color-surface-clean: #ffffff;
  --color-surface-muted: #f7f3ec;
  --color-nav-glass: rgb(36 26 18 / 88%);
  --color-nav-glass-hover: rgb(43 33 25 / 94%);
  --color-nav-ink: #fffaf2;

  /* Urban Concept liquid-glass system. */
  --glass-dark-surface: rgb(255 255 255 / 62%);
  --glass-dark-surface-soft: rgb(246 240 228 / 42%);
  --glass-dark-surface-hover: rgb(255 255 255 / 78%);
  --glass-light-surface: rgb(246 240 228 / 82%);
  --glass-light-surface-soft: rgb(255 255 255 / 48%);
  --glass-light-surface-hover: rgb(255 255 255 / 64%);
  --glass-border: rgb(236 215 166 / 28%);
  --glass-border-strong: rgb(236 215 166 / 48%);
  --glass-highlight: rgb(255 255 255 / 24%);
  --glass-shadow: 0 1.5rem 4rem rgb(92 67 38 / 16%);
  --glass-shadow-soft: 0 0.75rem 2rem rgb(92 67 38 / 10%);
  --shadow-hairline: 0 var(--border-size-1) var(--border-size-1) rgb(43 33 25 / 5%);
  --glass-blur: var(--space-m);
  --glass-radius: var(--radius-3);
  --glass-radius-large: var(--radius-4);
  --media-ratio-landscape: 16 / 9;
  --glass-gradient-dark: linear-gradient(145deg, var(--glass-dark-surface), var(--glass-dark-surface-soft));
  --glass-gradient-light: linear-gradient(145deg, var(--glass-light-surface), var(--glass-light-surface-soft));
  --glass-page-background: linear-gradient(180deg, var(--color-page-canvas), var(--color-surface-muted));

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: Jost, Arial, sans-serif;

  --font-step--2: clamp(0.6944rem, 0.6859rem + 0.0379vw, 0.72rem);
  --font-step--1: clamp(0.8333rem, 0.8111rem + 0.0988vw, 0.9rem);
  --font-step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --font-step-1: clamp(1.2rem, 1.1313rem + 0.3056vw, 1.4063rem);
  --font-step-2: clamp(1.44rem, 1.3344rem + 0.4691vw, 1.7578rem);
  --font-step-3: clamp(1.728rem, 1.5715rem + 0.6956vw, 2.1973rem);
  --font-step-4: clamp(2.0736rem, 1.8489rem + 0.9987vw, 2.7466rem);
  --font-step-5: clamp(2.4883rem, 2.173rem + 1.4015vw, 3.4332rem);
  --font-step-6: clamp(2.986rem, 2.5508rem + 1.9342vw, 4.2915rem);

  --space-3xs: clamp(0.25rem, 0.2396rem + 0.0463vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7188rem + 0.1389vw, 0.8438rem);
  --space-s: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
  --space-xl: clamp(3rem, 2.875rem + 0.5556vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8333rem + 0.7407vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.75rem + 1.1111vw, 6.75rem);

  --radius-s: var(--radius-1);
  --radius-m: var(--radius-2);
  --radius-l: var(--radius-3);
  --radius-pill: var(--radius-round);
  --shadow-s: var(--shadow-1);
  --shadow-m: var(--shadow-3);
  --shadow-l: var(--shadow-5);
  --ease-standard: var(--ease-3);
  --ease-enter: var(--ease-out-3);
  --ease-exit: var(--ease-in-3);
  --duration-fast: var(--animation-duration-fast);
  --duration-normal: var(--animation-duration-normal);
  --duration-intro: 1.8s;
  --motion-section-offset: 50;
  --motion-section-scale: 0.965;
  --motion-media-shift: 10;
  --motion-media-scale-start: 0.96;
  --motion-content-drift: 8;
  --border-thin: var(--border-size-1);
  --control-min-size: 2.75rem;
  --focus-ring-size: var(--border-size-2);
  --focus-ring-offset: var(--border-size-2);
  --pressed-scale: 0.98;

  --content-wide: 70rem;
  --content-reading: 48.75rem;
  --media-height: 33.75rem;
  --logo-width: 11.875rem;
  --intro-logo-width: clamp(8rem, 24vw, 14rem);
  --card-min-height: 16.25rem;
  --line-body: 1.75;
  --line-heading: 1.06;
  --tracking-label: 0.12em;
  --tracking-eyebrow: 0.18em;
}