/* =============================================================
   Guatemalan Concierge — Colors & Type
   Foundational tokens. Import this first in any artifact.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;500;600;700&display=swap');

:root {
  /* ------------ Brand Palette ------------ */
  --color-quetzal:       #1A7A6E;
  --color-quetzal-deep:  #0F5449;
  --color-navy:          #1C2A4A;
  --color-obsidian:      #0D1117;

  /* Accents */
  --color-red:           #8B2318;
  --color-red-hover:     #A32D20;
  --color-gold:          #C9A84C;
  --color-gold-light:    #E8D5A3;

  /* Neutrals */
  --color-parchment:     #F5F0E8;
  --color-stone:         #D4C9B8;
  --color-ash:           #8A8A8A;
  --color-charcoal:      #2D2D2D;

  /* ------------ Semantic Roles ------------ */
  --bg-primary:          var(--color-obsidian);
  --bg-secondary:        var(--color-navy);
  --bg-light:            var(--color-parchment);
  --bg-card:             #FBF8F2;

  --text-primary:        var(--color-navy);
  --text-body:           var(--color-charcoal);
  --text-muted:          var(--color-ash);
  --text-inverse:        var(--color-parchment);
  --text-inverse-muted:  rgba(245, 240, 232, 0.72);

  --accent-primary:      var(--color-quetzal);
  --accent-secondary:    var(--color-red);
  --accent-luxury:       var(--color-gold);

  --border-subtle:       var(--color-stone);
  --border-strong:       var(--color-navy);
  --border-gold:         var(--color-gold);

  /* Overlays */
  --overlay-dark:        rgba(13, 17, 23, 0.55);
  --overlay-teal:        rgba(15, 84, 73, 0.45);
  --overlay-navy:        rgba(28, 42, 74, 0.50);

  /* ------------ Type Families ------------ */
  --font-display:        'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-body:           'Libre Baskerville', 'Baskerville', Georgia, serif;
  --font-label:          'Cinzel', 'Trajan Pro', serif;

  /* ------------ Type Scale ------------ */
  --text-xs:     0.75rem;   /* 12px */
  --text-sm:     0.875rem;  /* 14px */
  --text-base:   1rem;      /* 16px */
  --text-lg:     1.25rem;   /* 20px */
  --text-xl:     1.5rem;    /* 24px */
  --text-2xl:    2rem;      /* 32px */
  --text-3xl:    3rem;      /* 48px */
  --text-4xl:    4.5rem;    /* 72px */
  --text-5xl:    7rem;      /* 112px */

  /* ------------ Tracking ------------ */
  --track-tight:     -0.02em;
  --track-normal:     0em;
  --track-wide:       0.05em;
  --track-label:      0.15em;
  --track-label-lg:   0.22em;

  /* ------------ Line Heights ------------ */
  --lh-display:   1.05;  /* @kind font */
  --lh-heading:   1.18;  /* @kind font */
  --lh-body:      1.75;  /* @kind font */
  --lh-tight:     1.2;   /* @kind font */

  /* ------------ Spacing Scale ------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;
  --space-48:  192px;

  /* ------------ Layout ------------ */
  --content-max:     1440px;
  --content-wide:    1200px;
  --content-narrow:  760px;
  --gutter:          32px;
  --gutter-mobile:   20px;

  /* ------------ Corners (mostly sharp) ------------ */
  --radius-none:  0;
  --radius-xs:    2px;   /* used rarely on form chrome */
  --radius-sm:    4px;
  --radius-pill:  999px; /* avoid on CTAs; OK for tags occasionally */

  /* ------------ Borders ------------ */
  --border-hair:    1px solid var(--color-stone);
  --border-gold-1:  1px solid var(--color-gold);
  --border-navy-1:  1px solid var(--color-navy);
  --border-doublex: 1px solid var(--color-gold); /* paired with outline trick for double rule */

  /* ------------ Elevation ------------ */
  --shadow-1:  0 1px 2px rgba(28, 42, 74, 0.06);
  --shadow-2:  0 4px 18px rgba(13, 17, 23, 0.10);
  --shadow-3:  0 18px 50px -12px rgba(13, 17, 23, 0.30);
  --shadow-inset-gold: inset 0 0 0 1px var(--color-gold);

  /* ------------ Motion ------------ */
  --ease-cinema:  cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-soft:    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --dur-quick:    220ms;  /* @kind other */
  --dur-base:     400ms;  /* @kind other */
  --dur-slow:     600ms;  /* @kind other */
  --dur-cinema:   900ms;  /* @kind other */
}

/* =============================================================
   Semantic Type Roles
   Use these classes on raw HTML or as @extend-style mixins.
   ============================================================= */

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
}

.t-display-hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-5xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-body);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
}

.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.35;
  color: var(--text-primary);
}

.t-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.t-label-lg {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.t-eyebrow {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label-lg);
  text-transform: uppercase;
  color: var(--accent-luxury);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* =============================================================
   Reset-ish defaults — opt in by adding class="gc-doc" to <body>
   ============================================================= */

.gc-doc {
  background: var(--bg-light);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gc-doc h1 { @extend .t-h1; }
.gc-doc h2 { @extend .t-h2; }
.gc-doc h3 { @extend .t-h3; }

/* Focus state — always gold, never blue */
.gc-doc :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}