/* AUTO-GENERATED by sync-css.js — do not edit directly. */
/* Edit shared-css/ sources or _*-local.css files, then run: node sync-css.js */

/* ===== Font Faces ===== */
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold-Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Custom Properties ===== */

:root {
  /* Flexoki Base */
  --fx-paper: #FFFCF0;
  --fx-black: #100F0F;
  --fx-base-50:  #F2F0E5;
  --fx-base-100: #E6E4D9;
  --fx-base-150: #DAD8CE;
  --fx-base-200: #CECDC3;
  --fx-base-300: #B7B5AC;
  --fx-base-400: #9F9D96;
  --fx-base-500: #878580;
  --fx-base-600: #6F6E69;
  --fx-base-700: #575653;
  --fx-base-800: #403E3C;
  --fx-base-850: #343331;
  --fx-base-900: #282726;
  --fx-base-950: #1C1B1A;

  /* Flexoki Accent Colors */
  --fx-red-400: #D14D41;
  --fx-red-600: #AF3029;
  --fx-orange-400: #DA702C;
  --fx-orange-600: #BC5215;
  --fx-yellow-400: #DFB431;
  --fx-yellow-600: #AD8301;
  --fx-green-400: #879A39;
  --fx-green-500: #768D21;
  --fx-green-600: #66800B;
  --fx-cyan-400: #3AA99F;
  --fx-cyan-600: #24837B;
  --fx-blue-400: #4385BE;
  --fx-blue-500: #3171B2;
  --fx-blue-600: #205EA6;
  --fx-purple-400: #8B7EC8;
  --fx-purple-600: #5E409D;
  --fx-magenta-400: #CE5D97;
  --fx-magenta-600: #A02F6F;

  /* Semantic Colors */
  --color-bg: var(--fx-paper);
  --color-text: var(--fx-base-950);
  --color-text-secondary: var(--fx-base-700);
  --color-text-muted: var(--fx-base-600);
  --color-border: var(--fx-base-200);
  --color-surface: #FFFFFF;
  --color-surface-hover: var(--fx-base-50);
  --color-brand: var(--fx-orange-600);
  --color-accent: var(--fx-purple-600);
  --color-link: var(--fx-blue-600);
  --color-link-hover: var(--fx-blue-400);
  --shadow-color: rgba(16, 15, 15, 0.08);

  /* Typography Scale — 1.2 ratio, 20px body base */
  --font-serif: 'GT Alpina', 'Georgia', serif;
  --font-sans: 'GT Pressura', system-ui, sans-serif;
  --base-size: 1.25rem;
  --wb-p3: 1.042rem;
  --badge-size: 0.868rem;
  --wb-p2: 1.25rem;
  --wb-p1: 1.5rem;

  /* Fluid heading scale */
  --h5: clamp(1.5rem, calc(1.175rem + 1.65vw), 2.16rem);
  --h4: clamp(1.8rem, calc(1.4rem + 2vw), 2.592rem);
  --h3: clamp(2.16rem, calc(1.69rem + 2.38vw), 3.11rem);
  --h2: clamp(2.592rem, calc(2.025rem + 2.85vw), 3.732rem);
  --h1: clamp(3.11rem, calc(2.425rem + 3.43vw), 4.478rem);

  /* Display heading — hero/landing page use */
  --h-display: clamp(2.5rem, 10vw, 12.5rem);

  /* Section Spacing — fluid vertical rhythm */
  --sp-section:    clamp(3.5rem, 7vh, 7rem);   /* standard section padding */
  --sp-section-lg: clamp(5rem, 11vh, 11rem);   /* hero/intro generous spacing */
  --sp-section-sm: clamp(2rem, 4vh, 4rem);     /* compact/utility sub-sections */
  --sp-section-x:  clamp(1.5rem, 5vw, 8vw);   /* horizontal section inset */

  /* VAI neutral aliases (used by existing inline CSS) */
  --paper: var(--fx-paper);
  --ink: var(--fx-base-950);
  --stone: var(--fx-base-600);
  --mist: var(--fx-base-400);
  --cloud: var(--fx-base-200);
  --fog: var(--fx-base-100);

  /* VAI alias (same as --font-sans from shared tokens) */
  --font-ui: var(--font-sans);
}

/* ===== Small Viewport Step-Down ===== */
@media (max-width: 480px) {
  :root {
    --wb-p1: 1.25rem;   /* steps down from 1.5rem (P1 → P2) */
    --wb-p2: 1.042rem;  /* steps down from 1.25rem (P2 → P3) */
  }
}

/* ===== Dark Mode ===== */
html.dark {
  /* Semantic overrides */
  --color-bg: var(--fx-base-950);
  --color-text: var(--fx-base-100);
  --color-text-secondary: var(--fx-base-300);
  --color-text-muted: var(--fx-base-400);
  --color-border: var(--fx-base-800);
  --color-surface: var(--fx-base-900);
  --color-surface-hover: var(--fx-base-850);
  --color-brand: var(--fx-orange-400);
  --color-accent: var(--fx-purple-400);
  --color-link: var(--fx-blue-400);
  --color-link-hover: var(--fx-blue-600);
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* VAI neutral dark overrides */
  --paper: var(--fx-base-950);
  --ink: var(--fx-base-50);
  --stone: var(--fx-base-400);
  --mist: var(--fx-base-600);
  --cloud: var(--fx-base-850);
  --fog: var(--fx-base-900);
}


/* ===== Base Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--wb-p2);
  font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-feature-settings: normal;
  font-variant-numeric: normal;
  margin-top: 0;
  color: var(--color-text);
}

h1 { font-size: var(--h1); font-weight: 900; line-height: 1.0;  margin-bottom: 0.5em; }
h2 { font-size: var(--h2); font-weight: 900; line-height: 1.05; margin-bottom: 0.5em; }
h3 { font-size: var(--h3); font-weight: 700; line-height: 1.1;  margin-bottom: 0.4em; }
h4 { font-size: var(--h4); font-weight: 700; line-height: 1.15; margin-bottom: 0.4em; }
h5 { font-size: var(--h5); font-weight: 500; line-height: 1.15; margin-bottom: 0.3em; }

/* ===== Links ===== */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}
a:hover:not(.btn-tactile) {
  color: var(--color-link-hover);
}

/* ===== Paragraphs ===== */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* ===== Selection ===== */
::selection {
  background-color: var(--fx-orange-400);
  color: var(--fx-base-950);
}
html.dark ::selection {
  background-color: var(--fx-orange-600);
  color: var(--fx-base-50);
}

/* ===== Scrollbar (subtle) ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fx-base-300);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--fx-base-700);
}

/* ===== Accessibility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Loading Skeleton ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-100) 25%,
    var(--fx-base-150) 50%,
    var(--fx-base-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
html.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-850) 25%,
    var(--fx-base-800) 50%,
    var(--fx-base-850) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}