/* ============================================================
   GOLWEL FIELDS — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Aesthetic: Editorial luxury • Institutional trust • Gold accent
   ============================================================ */

:root {
  /* --- Brand colors (locked in logo) --- */
  --gfl-gold:        #bb8201;
  --gfl-gold-50:     #fdf8ed;
  --gfl-gold-100:    #faecc7;
  --gfl-gold-200:    #f3d488;
  --gfl-gold-300:    #e2b34c;
  --gfl-gold-400:    #d09a25;
  --gfl-gold-500:    #bb8201;   /* base */
  --gfl-gold-600:    #9c6b04;
  --gfl-gold-700:    #7a530a;
  --gfl-gold-800:    #5a3d0e;
  --gfl-gold-900:    #3d2a0c;

  --gfl-cream:       #f9f9f9;
  --gfl-cream-warm:  #f7f4ed;
  --gfl-paper:       #fdfcfa;

  --gfl-ink:         #000000;
  --gfl-ink-soft:    #1a1a1a;
  --gfl-charcoal:    #2a2a2a;
  --gfl-graphite:    #4a4a4a;
  --gfl-stone:       #6b6b6b;
  --gfl-mist:        #a8a8a8;
  --gfl-fog:         #d4d4d4;
  --gfl-haze:        #e8e8e8;

  /* --- Semantic --- */
  --gfl-success:     #16794d;
  --gfl-warning:     #b45309;
  --gfl-danger:      #b91c1c;
  --gfl-info:        #1d4ed8;
  --gfl-whatsapp:    #25d366;

  /* --- Surfaces --- */
  --gfl-bg:           var(--gfl-paper);
  --gfl-bg-alt:       var(--gfl-cream);
  --gfl-bg-dark:      var(--gfl-ink);
  --gfl-bg-elevated:  #ffffff;
  --gfl-border:       #e6e0d3;
  --gfl-border-soft:  rgba(187, 130, 1, 0.12);
  --gfl-border-gold:  rgba(187, 130, 1, 0.35);

  /* --- Text --- */
  --gfl-text:         var(--gfl-ink-soft);
  --gfl-text-muted:   var(--gfl-stone);
  --gfl-text-subtle:  var(--gfl-mist);
  --gfl-text-on-gold: #ffffff;
  --gfl-text-on-dark: var(--gfl-cream);

  /* --- Typography --- */
  --gfl-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --gfl-font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gfl-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --gfl-leading-tight:   1.15;
  --gfl-leading-snug:    1.35;
  --gfl-leading-normal:  1.6;
  --gfl-leading-relaxed: 1.75;

  --gfl-tracking-tight:  -0.02em;
  --gfl-tracking-normal: 0;
  --gfl-tracking-wide:   0.04em;
  --gfl-tracking-wider:  0.12em;

  /* Type scale (modular, 1.25 ratio) */
  --gfl-text-xs:   0.75rem;     /* 12px */
  --gfl-text-sm:   0.875rem;    /* 14px */
  --gfl-text-base: 1rem;        /* 16px */
  --gfl-text-lg:   1.125rem;    /* 18px */
  --gfl-text-xl:   1.375rem;    /* 22px */
  --gfl-text-2xl:  1.75rem;     /* 28px */
  --gfl-text-3xl:  2.25rem;     /* 36px */
  --gfl-text-4xl:  3rem;        /* 48px */
  --gfl-text-5xl:  3.75rem;     /* 60px */
  --gfl-text-6xl:  4.75rem;     /* 76px */

  /* --- Spacing scale (4px base) --- */
  --gfl-space-1:  0.25rem;
  --gfl-space-2:  0.5rem;
  --gfl-space-3:  0.75rem;
  --gfl-space-4:  1rem;
  --gfl-space-5:  1.5rem;
  --gfl-space-6:  2rem;
  --gfl-space-7:  3rem;
  --gfl-space-8:  4rem;
  --gfl-space-9:  6rem;
  --gfl-space-10: 8rem;

  /* --- Layout --- */
  --gfl-container-sm:  640px;
  --gfl-container-md:  768px;
  --gfl-container-lg:  1024px;
  --gfl-container-xl:  1200px;
  --gfl-container-2xl: 1400px;
  --gfl-container:     min(1200px, calc(100% - 2rem));

  /* --- Radii --- */
  --gfl-radius-none: 0;
  --gfl-radius-sm:   2px;
  --gfl-radius-md:   4px;
  --gfl-radius-lg:   8px;
  --gfl-radius-xl:   12px;
  --gfl-radius-2xl:  20px;
  --gfl-radius-full: 9999px;

  /* --- Shadows --- */
  --gfl-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --gfl-shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --gfl-shadow-md:   0 6px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --gfl-shadow-lg:   0 16px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --gfl-shadow-xl:   0 32px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --gfl-shadow-gold: 0 8px 24px rgba(187, 130, 1, 0.25);
  --gfl-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* --- Motion --- */
  --gfl-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --gfl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gfl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --gfl-duration-fast:   140ms;
  --gfl-duration-base:   240ms;
  --gfl-duration-slow:   420ms;
  --gfl-duration-stately: 720ms;

  /* --- Z layers --- */
  --gfl-z-base:    1;
  --gfl-z-raised:  10;
  --gfl-z-overlay: 100;
  --gfl-z-sticky:  500;
  --gfl-z-modal:   1000;
  --gfl-z-toast:   2000;
  --gfl-z-float:   9000;
}

/* Reset/base — applies project-wide */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--gfl-font-body);
  font-size: var(--gfl-text-base);
  line-height: var(--gfl-leading-normal);
  color: var(--gfl-text);
  background: var(--gfl-bg);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gfl-font-display);
  font-weight: 500;
  line-height: var(--gfl-leading-tight);
  letter-spacing: var(--gfl-tracking-tight);
  margin: 0 0 var(--gfl-space-4);
  color: var(--gfl-ink);
}

p { margin: 0 0 var(--gfl-space-4); }

a {
  color: var(--gfl-gold-600);
  text-decoration: none;
  transition: color var(--gfl-duration-fast) var(--gfl-ease-out);
}
a:hover { color: var(--gfl-gold-700); }

img { max-width: 100%; height: auto; display: block; }

/* Selection */
::selection {
  background: var(--gfl-gold);
  color: #ffffff;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--gfl-gold);
  outline-offset: 3px;
  border-radius: var(--gfl-radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}