/* ================================================
   ViAspaze — Design Tokens & Base Styles
   Shared across all pages. Do not edit per-page.
   ================================================ */

/* ---- Custom Fonts ---- */
@font-face {
  font-family: "TAN Astoria";
  src: url("../fonts/TAN-Astoria-Display.otf") format("opentype"),
       url("../fonts/TAN-Astoria-Display.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Loubag";
  src: url("../fonts/Loubag-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: local("Futura"), local("Futura PT"), local("Futura-Medium"), local("FuturaPT-Book");
  font-display: swap;
}

/* ---- Design Tokens ---- */
:root {
  /* Typography stacks */
  --font-wordmark: "TAN Astoria", "Italiana", Georgia, serif;
  --font-display: "Loubag", "Syne", system-ui, sans-serif;
  --font-nav: "Futura", "Futura PT", "Jost", system-ui, sans-serif;
  --font-editorial: "Lora", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Palette */
  --color-maroon-deep: #24091A;
  --color-maroon: #5A1028;
  --color-crimson: #8E1E3A;
  --color-coral: #F0605A;
  --color-amber: #EE9A4E;
  --color-gold: #F9D98A;
  --color-lavender: #DCD8FF;
  --color-periwinkle: #C3D3FF;
  --color-ice: #D4EFF7;

  /* Surfaces */
  --color-background: #F4F6FB;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FBF8F6;

  /* Text */
  --color-text-primary: #2A0B17;
  --color-text-secondary: #5E4651;
  --color-text-inverse: #FFF3EA;
  --color-text-inverse-muted: #F2D6CF;

  /* Accents & borders */
  --color-accent: #B8283F;
  --color-border: rgba(42, 11, 23, 0.12);

  /* Glass */
  --color-glass: rgba(246, 244, 250, 0.62);
  --color-glass-border: rgba(42, 11, 23, 0.10);
  --color-glass-dark: rgba(74, 14, 34, 0.34);
  --color-glass-dark-border: rgba(255, 220, 205, 0.22);

  /* Gradients */
  --gradient-primary: radial-gradient(120% 95% at 50% 105%, #FBE3A0 0%, #F2A35A 20%, #F0605A 40%, #8E1E3A 64%, #5A1028 80%, #24091A 100%);
  --gradient-secondary: linear-gradient(160deg, #DCD8FF 0%, #C3D3FF 48%, #D4EFF7 100%);
  --gradient-horizon: linear-gradient(180deg, #5A1028 0%, #F0605A 30%, #F2A35A 46%, #C3D3FF 72%, #EAF2FB 100%);

  /* Patterns */
  --stripes: repeating-linear-gradient(135deg, rgba(42, 11, 23, 0.06) 0 1px, transparent 1px 11px);
  --stripes-light: repeating-linear-gradient(135deg, rgba(255, 243, 234, 0.10) 0 1px, transparent 1px 11px);

  /* Elevation */
  --shadow-soft: 0 1px 2px rgba(42, 11, 23, 0.05), 0 18px 50px -24px rgba(42, 11, 23, 0.28);

  /* Radii */
  --radius-card: 22px;
  --radius-media: 28px;
  --radius-control: 999px;

  /* Layout */
  --container-max: 1280px;
  --page-gutter: clamp(20px, 4.5vw, 64px);
  --section-y: clamp(88px, 11vw, 168px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Base Reset ---- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { animation: none !important; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Mobile Layout Alignment Fix ---- */
/* On mobile devices, center hero content below the header so it is not pushed down against the bottom toolbar */
@media (max-width: 768px) {
  section[data-screen-label="01 Hero"] {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
  section[data-screen-label="01 Hero"] > .hero-content-wrap,
  section[data-screen-label="01 Hero"] > div[style*="justify-content:flex-end"] {
    justify-content: center !important;
    padding-top: calc(62px + 24px) !important;
    padding-bottom: 28px !important;
    gap: 24px !important;
  }
  section[data-screen-label="01 Hero"] [data-reveal] {
    gap: 20px !important;
  }
  /* Wrapped title lines were colliding at the desktop 0.92 line-height */
  #hero-title {
    font-size: 9vw !important;
    line-height: 1.08 !important;
  }
  #hero-title > span {
    margin: 0 !important;
    padding: .06em .06em !important;
  }
  section[data-screen-label="01 Hero"] [data-reveal] > div[style*="align-items:center"] {
    gap: 20px !important;
  }
  section[data-screen-label="01 Hero"] [data-reveal] > div[style*="align-items:center"] > div[style*="max-width:560px"] {
    gap: 20px !important;
  }

  /* About page hero mobile alignment */
  section[data-screen-label="01 Hero"][style*="min-height:min(92vh"] {
    min-height: auto !important;
    padding-top: calc(62px + 36px) !important;
    padding-bottom: 48px !important;
    align-items: center !important;
  }
}