/* Canonical design tokens for the Irina Vantey portfolio. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wdth,wght@75..100,400..700&family=Onest:wght@400;500;600&family=Raleway:wght@400;500;600;700&display=swap");

:root {
  /* Typography */
  --font-display: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-interface: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-display);
  --letter-spacing-display: -0.035em;
  --letter-spacing-label: 0.02em;
  --letter-spacing: 0;

  /* Brand colour families */
  --color-ink: #102830;
  --color-ink-strong: #0A1B21;
  --color-ink-soft: #1C3942;
  --color-ink-muted: #496067;
  --color-ink-pale: #D9E1E3;
  --color-ink-mist: #EDF2F3;
  --color-raspberry: #B20C47;
  --color-raspberry-dark: #8A0937;
  --color-raspberry-soft: #D7668D;
  --color-raspberry-pale: #F1BDD0;
  --color-raspberry-mist: #FAE9EF;

  /* Neutral surfaces */
  --color-canvas: #F5F4F6;
  --color-surface: #F8F7F9;
  --color-white: #FFFFFF;
  --color-line: #D6D5DB;
  --surface-neomorphic: var(--color-surface);
  --surface-glass: rgba(255, 255, 255, 0.56);
  --surface-glass-strong: rgba(255, 255, 255, 0.72);

  /* Layout and rhythm */
  --container: min(1240px, calc(100% - 48px));
  --container-wide: min(1360px, calc(100% - 48px));
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-section-sm: 72px;
  --space-section: 104px;
  --space-section-lg: 144px;

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Light always comes from the top-left. */
  --shadow-large: -14px -14px 30px rgba(255, 255, 255, 0.9), 14px 16px 34px rgba(16, 40, 48, 0.14);
  --shadow-small: -5px -5px 11px rgba(255, 255, 255, 0.92), 7px 8px 15px rgba(16, 40, 48, 0.18);
  --shadow-glass: 0 18px 42px rgba(16, 40, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  --shadow-accent: 0 18px 36px rgba(178, 12, 71, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-ink: 0 18px 36px rgba(16, 40, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-inset: inset 4px 4px 9px rgba(16, 40, 48, 0.15), inset -4px -4px 9px rgba(255, 255, 255, 0.9);
  --focus-ring: 0 0 0 4px rgba(178, 12, 71, 0.18);

  /* Motion */
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --duration-surface: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Page-specific tokens */
  --hero-photo-width: 610px;
  --hero-photo-aspect: 1 / 0.72;
  --hero-photo-rotate: -2.5deg;
  --hero-photo-radius: var(--radius-lg);
  --hero-photo-shadow: 0 28px 80px rgba(178, 12, 71, 0.16), 0 20px 46px rgba(16, 40, 48, 0.12);
  --quote-mark-size: clamp(52px, 7vw, 96px);
  --quote-shell-min-height: 176px;

  /* Compatibility aliases for the current page while components migrate. */
  --bg: var(--color-canvas);
  --bg-soft: var(--color-ink-mist);
  --surface: var(--surface-glass);
  --surface-strong: var(--color-white);
  --graphite: var(--color-ink);
  --graphite-2: var(--color-ink-soft);
  --muted: var(--color-ink-muted);
  --line: rgba(16, 40, 48, 0.12);
  --line-light: rgba(255, 255, 255, 0.16);
  --pink: var(--color-raspberry);
  --pink-2: var(--color-raspberry);
  --violet: var(--color-ink-soft);
  --lilac: var(--color-raspberry-mist);
  --soft-pink: var(--color-raspberry-mist);
  --milk: var(--color-surface);
  --gradient: linear-gradient(145deg, var(--color-raspberry), var(--color-raspberry-dark));
  --gradient-radial: radial-gradient(circle at 30% 24%, var(--color-raspberry-soft) 0%, var(--color-raspberry) 38%, var(--color-raspberry-dark) 72%, var(--color-ink) 100%);
  --photo-gradient: var(--gradient);
  --shadow: var(--shadow-large);
  --shadow-soft: var(--shadow-glass);
  --shadow-neumorphic: var(--shadow-large);
  --shadow-button: var(--shadow-small);
  --glow: var(--shadow-accent);
}

@media (max-width: 760px) {
  :root {
    --container: min(calc(100% - 28px), 1240px);
    --container-wide: min(calc(100% - 28px), 1360px);
    --space-section-sm: 48px;
    --space-section: 64px;
    --space-section-lg: 80px;
    --shadow-large: -7px -7px 18px rgba(255, 255, 255, 0.8), 8px 10px 24px rgba(16, 40, 48, 0.12);
  }
}