/* Gia site — design tokens.
   Colors: docs/GLONARI_PULSE_COLORS.md. Type, spacing, layout, motion: docs/GIA-SITE-DESIGN-SYSTEM.md. */
:root {
  color-scheme: light;
  /* Background & surfaces */
  --gp-black: #efe5d2; --gp-bg: #f7f0e4; --gp-surface: #fffdf8; --gp-surface-2: #f2e9d8;
  --gp-warm-dark: #ece0c9; --gp-line: #e2d7c2;
  --gp-glass: rgba(255, 253, 248, 0.74);
  --gp-glass-border: rgba(165, 101, 79, 0.28);
  --gp-glass-border-active: rgba(165, 101, 79, 0.55);
  /* Glonari gold */
  --gp-gold-glow: #d1976a; --gp-gold: #92543f; --gp-gold-warm: #bd7a63; --gp-gold-mid: #8a4f3f;
  --gp-gold-deep: #7f4537; --gp-gold-dark: #c9a07e; --gp-champagne: #7f4537; --gp-copper: #7f4537;
  /* Text */
  --gp-text: #16233f; --gp-white: #FFFFFF; --gp-text-2: #5c6375; --gp-text-muted: #636a7d; --gp-on-gold: #16233f;
  /* Data colors */
  --gp-green: #2e7d4f; --gp-blue: #2f6fd0; --gp-teal: #0f7f8c; --gp-violet: #7b4fc0; --gp-warning: #a04b24;
  /* Effects */
  --gp-btn-gradient: linear-gradient(180deg, #f6e2b8 0%, #e8bd7d 55%, #d1976a 100%);
  --gp-power-glow: 0 0 40px rgba(189, 122, 99, 0.35);

  /* Type (DS) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Jost", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout (DS) */
  --container-max: 1200px;
  --page-pad: clamp(24px, 3.5vw, 48px);
  --section-pad: clamp(96px, 11vw, 160px);
  --section-pad-compact: clamp(72px, 8vw, 96px);
  --grid-gap: clamp(48px, 6vw, 96px);
  --header-row: 72px;                                   /* level 1: brand, pages, CTA */
  --subnav-h: 44px;                                     /* level 2: sections of this page */
  --header-h: calc(var(--header-row) + var(--subnav-h)); /* total fixed header; level 2 hides at 1100px and below */
  --ease: cubic-bezier(.22, .61, .36, 1);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1100px) { :root { --header-h: var(--header-row); } }
@media (max-width: 768px) { :root { --header-row: 64px; --page-pad: 24px; } }
@media (max-width: 480px) { :root { --page-pad: 20px; } }