/* ==========================================================================
   Design tokens — Ana & Thiago, 23.01.2027
   Ported from the "Thiago & Ana 2027 — Design System" (approved reference).
   Pure custom properties; no selectors besides :root. Do not hand-edit
   values here without checking guidelines in the source design system.
   ========================================================================== */

/* ---- fonts ---- */
:root {
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", system-ui, sans-serif;
}

/* ---- colors ---- */
:root {
  --blue-25: #f7fafc;
  --blue-50: #eef4f8;
  --blue-100: #dfeaf2;
  --blue-200: #c9dce8;
  --blue-300: #adc9da;
  --blue-400: #8fb2c8;
  --blue-500: #7199b1;
  --blue-600: #547c95;
  --blue-700: #3e6079;
  --blue-800: #2c465a;
  --blue-900: #1e323f;

  --paper: #ffffff;
  --paper-warm: #fdfbf7;
  --sand-50: #f6f2eb;
  --sand-100: #ece5da;
  --sand-200: #ddd3c5;
  --ink-300: #a8a29a;
  --ink-500: #6f6a63;
  --ink-700: #403c37;
  --ink-900: #23211e;

  --gold-100: #f3ead9;
  --gold-200: #e4d3b4;
  --gold-400: #c9ab74;
  --gold-500: #b08f52;
  --gold-700: #8a6e3c;

  --surface-page: var(--paper);
  --surface-page-alt: var(--paper-warm);
  --surface-tint: var(--blue-50);
  --surface-tint-strong: var(--blue-100);
  --surface-card: var(--paper);
  --surface-card-tint: var(--blue-25);
  --surface-deep: var(--blue-800);
  --surface-overlay: rgba(30, 50, 63, 0.34);

  --text-display: var(--blue-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-300);
  --text-on-deep: var(--blue-50);
  --text-on-photo: #ffffff;
  --text-accent: var(--gold-700);
  --text-link: var(--blue-700);
  --text-link-hover: var(--blue-900);

  --line-hairline: rgba(30, 50, 63, 0.1);
  --line-soft: var(--blue-100);
  --line-strong: var(--blue-200);
  --line-gold: var(--gold-200);

  --action-fill: var(--blue-800);
  --action-fill-hover: var(--blue-900);
  --action-on-fill: var(--blue-25);
  --action-quiet-border: var(--blue-300);
  --action-quiet-text: var(--blue-800);
  --focus-ring: var(--blue-400);

  --state-success: #5c7f66;
  --state-success-tint: #eef3ef;
  --state-error: #a2564e;
  --state-error-tint: #f6edec;
  --state-info-tint: var(--blue-50);
}

/* ---- typography ---- */
:root {
  --size-display-xl: clamp(4.25rem, 13vw, 11rem);
  --size-display-l: clamp(3.25rem, 7vw, 5.75rem);
  --size-display-m: clamp(2.375rem, 4.2vw, 3.25rem);
  --size-display-s: 1.75rem;
  --size-body-l: 1.3125rem;
  --size-body: 1.0625rem;
  --size-body-s: 1rem;
  --size-caption: 0.875rem;
  --size-label: 0.75rem;

  --weight-display: 300;
  --weight-display-em: 500;
  --weight-sans: 300;
  --weight-sans-em: 400;

  --leading-display: 0.94;
  --leading-title: 1.1;
  --leading-body: 1.75;
  --leading-tight: 1.4;

  --tracking-display: -0.01em;
  --tracking-body: 0.005em;
  --tracking-label: 0.26em;
  --tracking-wide: 0.14em;

  --type-names: var(--weight-display) var(--size-display-xl) / var(--leading-display) var(--font-display);
  --type-section-title: var(--weight-display) var(--size-display-l) / var(--leading-title) var(--font-display);
  --type-card-title: var(--weight-display) var(--size-display-m) / var(--leading-title) var(--font-display);
  --type-lede: var(--weight-sans) var(--size-body-l) / var(--leading-body) var(--font-sans);
  --type-body: var(--weight-sans) var(--size-body) / var(--leading-body) var(--font-sans);
  --type-caption: var(--weight-sans) var(--size-caption) / var(--leading-tight) var(--font-sans);
  --type-label: var(--weight-sans-em) var(--size-label) / 1 var(--font-sans);
}

/* ---- spacing ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 176px;

  --gutter: var(--space-5);
  --page-pad-x: clamp(20px, 6vw, 88px);
  --section-pad-y: clamp(72px, 12vw, 176px);
  --stack-tight: var(--space-3);
  --stack: var(--space-5);
  --stack-loose: var(--space-7);

  --measure-prose: 34rem;
  --measure-narrow: 24rem;
  --page-max: 1240px;
  --page-max-wide: 1440px;

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-image: 2px;
  --radius-soft: 28px;
  --radius-oval: 50% / 50%;
  --radius-capsule: 999px 999px 999px 999px;
  --radius-arch: 999px 999px var(--radius-2) var(--radius-2);
  --radius-pill: 999px;
}

/* ---- elevation ---- */
:root {
  --shadow-none: none;
  --shadow-lift: 0 1px 2px rgba(30, 50, 63, 0.04), 0 12px 32px -18px rgba(30, 50, 63, 0.18);
  --shadow-float: 0 2px 4px rgba(30, 50, 63, 0.05), 0 28px 60px -28px rgba(30, 50, 63, 0.24);

  --border-hairline: 1px solid var(--line-hairline);
  --border-soft: 1px solid var(--line-soft);
  --border-gold: 1px solid var(--line-gold);

  --veil-photo: linear-gradient(to bottom, rgba(30, 50, 63, 0.28) 0%, rgba(30, 50, 63, 0.1) 40%, rgba(30, 50, 63, 0.42) 100%);
  --veil-photo-light: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(30, 50, 63, 0.22));

  --wash-tint: radial-gradient(120% 90% at 50% 0%, var(--blue-50) 0%, var(--paper) 62%);
  --blur-glass: saturate(1.02) blur(14px);
}

/* ---- motion ---- */
:root {
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-veil: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-quick: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-cinematic: 1200ms;

  --reveal-offset: 18px;
  --hover-image-scale: 1.03;
}