/*
 * Gladys Christina — Design System Tokens
 * colors_and_type.css
 *
 * Usage: import this file first in any design artifact or UI kit.
 * All CSS custom properties are defined on :root.
 *
 * Sections:
 *  1. Google Fonts Import
 *  2. Base Color Primitives
 *  3. Semantic Color Tokens
 *  4. Typography Primitives
 *  5. Semantic Typography Tokens
 *  6. Spacing Scale
 *  7. Border Radius
 *  8. Shadow System
 *  9. Transition Tokens
 * 10. Base Reset + Body Defaults
 */

/* ─────────────────────────────────────────────
   1. GOOGLE FONTS
   Cormorant Garamond: elegant high-contrast serif (display/headings)
   Jost: clean geometric sans (body/UI)
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {

  /* ─────────────────────────────────────────────
     2. BASE COLOR PRIMITIVES
     Named after their visual quality in the brand
     ───────────────────────────────────────────── */

  /* Teal family — primary brand */
  --gc-teal-900: #1a5c63;
  --gc-teal-700: #3a9ba5;
  --gc-teal:     #56B5BF;   /* brand primary */
  --gc-teal-400: #7ecbd3;
  --gc-teal-200: #b3e5e9;
  --gc-teal-100: #d4eff1;
  --gc-teal-50:  #ebf7f8;

  /* Indigo family — dark anchor */
  --gc-indigo-900: #1e1b33;
  --gc-indigo-800: #2e2952;
  --gc-indigo:     #4D4373;  /* logo text, body text, footer */
  --gc-indigo-500: #6b637a;
  --gc-indigo-300: #9b94a8;
  --gc-indigo-100: #dddbe3;
  --gc-indigo-50:  #f0eff3;

  /* Sky blue family — secondary/links */
  --gc-sky:    #7DCCE3;
  --gc-sky-200: #bce7f2;
  --gc-sky-100: #ddf3f9;
  --gc-sky-50:  #eef9fd;

  /* Aqua family — light surfaces */
  --gc-aqua:    #89E4E0;
  --gc-aqua-200: #bcf0ed;
  --gc-aqua-100: #d8f7f5;
  --gc-aqua-50:  #ecfbfa;

  /* Peach — warm accent / hover */
  --gc-peach:    #F2A488;
  --gc-peach-700: #d4785a;
  --gc-peach-200: #f9cfc2;
  --gc-peach-100: #fde8e1;
  --gc-peach-50:  #fef5f2;

  /* Rose — secondary accent */
  --gc-rose:    #D97386;
  --gc-rose-700: #b84d63;
  --gc-rose-200: #edadb8;
  --gc-rose-100: #f6d4da;
  --gc-rose-50:  #fceef0;

  /* Plum — accent headings / event labels */
  --gc-plum:    #A65180;
  --gc-plum-700: #7a3460;
  --gc-plum-200: #d4a0bf;
  --gc-plum-100: #ead2e2;
  --gc-plum-50:  #f6eef3;

  /* Neutrals */
  --gc-white:    #FFFFFF;
  --gc-off-white: #F5FAFB;
  --gc-gray-100: #F0F4F5;
  --gc-gray-300: #C8D2D5;
  --gc-gray-500: #8A9DA2;
  --gc-gray-700: #4A5C60;
  --gc-black:    #0D1517;

  /* ─────────────────────────────────────────────
     3. SEMANTIC COLOR TOKENS
     Map primitives to purpose
     ───────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:           var(--gc-white);
  --color-bg-subtle:    var(--gc-off-white);       /* alternate section bg */
  --color-bg-tint:      var(--gc-teal-50);         /* feature section tint */
  --color-bg-aqua:      var(--gc-aqua-50);         /* lightest aqua surface */
  --color-bg-footer:    var(--gc-indigo);          /* deep indigo footer */
  --color-bg-dark:      var(--gc-indigo-900);      /* darkest bg */

  /* Foreground / Text */
  --color-fg-primary:   var(--gc-indigo);          /* main body text */
  --color-fg-secondary: var(--gc-indigo-500);      /* secondary/supporting text */
  --color-fg-caption:   var(--gc-indigo-300);      /* captions, placeholders */
  --color-fg-inverse:   var(--gc-white);           /* text on dark backgrounds */
  --color-fg-on-teal:   var(--gc-white);           /* text on teal buttons */
  --color-fg-brand:     var(--gc-teal);            /* branded text accents */

  /* Brand / Interactive */
  --color-brand:        var(--gc-teal);
  --color-brand-dark:   var(--gc-teal-700);
  --color-brand-light:  var(--gc-teal-50);
  --color-link:         var(--gc-sky);
  --color-link-hover:   var(--gc-teal);

  /* CTA Buttons */
  --color-btn-primary-bg:     var(--gc-teal);
  --color-btn-primary-text:   var(--gc-white);
  --color-btn-primary-hover:  var(--gc-peach);
  --color-btn-secondary-bg:   var(--gc-sky);
  --color-btn-secondary-text: var(--gc-indigo);
  --color-btn-outline-border: var(--gc-teal);
  --color-btn-outline-text:   var(--gc-teal);
  --color-btn-outline-hover:  var(--gc-teal-50);
  --color-btn-whatsapp:       var(--gc-teal);
  --color-btn-email:          var(--gc-indigo);

  /* Accents */
  --color-accent-rose:  var(--gc-rose);
  --color-accent-plum:  var(--gc-plum);
  --color-accent-peach: var(--gc-peach);
  --color-accent-sky:   var(--gc-sky);

  /* Section labels */
  --color-label-real-estate: var(--gc-teal);
  --color-label-retreats:    var(--gc-plum);
  --color-label-blog:        var(--gc-rose);

  /* Borders */
  --color-border:       rgba(86, 181, 191, 0.18);
  --color-border-input: rgba(86, 181, 191, 0.35);
  --color-border-focus: var(--gc-teal);
  --color-border-subtle: var(--gc-indigo-100);

  /* ─────────────────────────────────────────────
     4. TYPOGRAPHY PRIMITIVES
     ───────────────────────────────────────────── */

  /* Font families */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Jost', system-ui, -apple-system, sans-serif;
  --font-mono:     'Courier New', Courier, monospace;

  /* Font sizes — rem-based (base 16px) */
  --text-xs:    0.75rem;    /* 12px — captions, legal */
  --text-sm:    0.875rem;   /* 14px — small body, labels */
  --text-base:  1rem;       /* 16px — body */
  --text-lg:    1.125rem;   /* 18px — lead/intro body */
  --text-xl:    1.25rem;    /* 20px — large body, card titles */
  --text-2xl:   1.5rem;     /* 24px — H5, large labels */
  --text-3xl:   2rem;       /* 32px — H4 */
  --text-4xl:   2.5rem;     /* 40px — H3 */
  --text-5xl:   3.25rem;    /* 52px — H2 */
  --text-6xl:   4rem;       /* 64px — H1 */
  --text-hero:  5rem;       /* 80px — Hero headline */
  --text-mega:  6.5rem;     /* 104px — Impact/statement */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.9;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;   /* section labels (ALL CAPS) */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* ─────────────────────────────────────────────
     5. SEMANTIC TYPOGRAPHY TOKENS
     ───────────────────────────────────────────── */

  /* Hero */
  --type-hero-family:   var(--font-display);
  --type-hero-size:     var(--text-hero);
  --type-hero-weight:   var(--weight-light);
  --type-hero-leading:  var(--leading-tight);
  --type-hero-tracking: var(--tracking-tight);

  /* Headings */
  --type-h1-family:     var(--font-display);
  --type-h1-size:       var(--text-6xl);
  --type-h1-weight:     var(--weight-regular);
  --type-h1-leading:    var(--leading-tight);
  --type-h1-tracking:   var(--tracking-tight);

  --type-h2-family:     var(--font-display);
  --type-h2-size:       var(--text-5xl);
  --type-h2-weight:     var(--weight-light);
  --type-h2-leading:    var(--leading-snug);
  --type-h2-tracking:   var(--tracking-tight);

  --type-h3-family:     var(--font-display);
  --type-h3-size:       var(--text-4xl);
  --type-h3-weight:     var(--weight-regular);
  --type-h3-leading:    var(--leading-snug);
  --type-h3-tracking:   var(--tracking-normal);

  --type-h4-family:     var(--font-display);
  --type-h4-size:       var(--text-3xl);
  --type-h4-weight:     var(--weight-medium);
  --type-h4-leading:    var(--leading-snug);
  --type-h4-tracking:   var(--tracking-normal);

  --type-h5-family:     var(--font-body);
  --type-h5-size:       var(--text-xl);
  --type-h5-weight:     var(--weight-semibold);
  --type-h5-leading:    var(--leading-normal);
  --type-h5-tracking:   var(--tracking-wide);

  --type-h6-family:     var(--font-body);
  --type-h6-size:       var(--text-base);
  --type-h6-weight:     var(--weight-semibold);
  --type-h6-leading:    var(--leading-normal);
  --type-h6-tracking:   var(--tracking-wider);

  /* Body */
  --type-body-family:   var(--font-body);
  --type-body-size:     var(--text-base);
  --type-body-weight:   var(--weight-regular);
  --type-body-leading:  var(--leading-relaxed);

  --type-lead-family:   var(--font-body);
  --type-lead-size:     var(--text-lg);
  --type-lead-weight:   var(--weight-light);
  --type-lead-leading:  var(--leading-relaxed);

  /* Labels & UI */
  --type-label-family:   var(--font-body);
  --type-label-size:     var(--text-xs);
  --type-label-weight:   var(--weight-medium);
  --type-label-tracking: var(--tracking-widest);

  --type-caption-family: var(--font-body);
  --type-caption-size:   var(--text-xs);
  --type-caption-weight: var(--weight-light);
  --type-caption-leading:var(--leading-relaxed);

  --type-button-family:  var(--font-body);
  --type-button-size:    var(--text-sm);
  --type-button-weight:  var(--weight-medium);
  --type-button-tracking:var(--tracking-wide);

  /* ─────────────────────────────────────────────
     6. SPACING SCALE
     4px base unit
     ───────────────────────────────────────────── */

  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /*  2px */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-28:   7rem;      /* 112px */
  --space-32:   8rem;      /* 128px */

  /* Semantic spacing */
  --section-padding-y:     var(--space-24);    /* 96px desktop */
  --section-padding-y-sm:  var(--space-12);    /* 48px mobile */
  --section-padding-x:     var(--space-6);     /* 24px horizontal */
  --container-max:         1280px;
  --container-padding:     var(--space-6);
  --card-padding:          var(--space-6);
  --card-padding-lg:       var(--space-8);

  /* ─────────────────────────────────────────────
     7. BORDER RADIUS
     Large radii — cards and slideshows are very rounded
     ───────────────────────────────────────────── */

  --radius-none:   0px;
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;    /* cards */
  --radius-2xl:    24px;    /* slideshows, featured cards */
  --radius-3xl:    32px;    /* hero sections with radius */
  --radius-pill:   9999px;  /* buttons, tags */

  /* Semantic radius */
  --radius-card:      var(--radius-xl);
  --radius-card-lg:   var(--radius-2xl);
  --radius-btn:       var(--radius-pill);
  --radius-tag:       var(--radius-pill);
  --radius-input:     var(--radius-sm);
  --radius-image:     var(--radius-lg);
  --radius-slideshow: var(--radius-2xl);

  /* ─────────────────────────────────────────────
     8. SHADOW SYSTEM
     Indigo-toned shadows — soft, warm, no harsh black
     ───────────────────────────────────────────── */

  --shadow-xs:   0 1px 3px rgba(77, 67, 115, 0.06);
  --shadow-sm:   0 2px 8px rgba(77, 67, 115, 0.08);
  --shadow-md:   0 4px 20px rgba(77, 67, 115, 0.10);   /* default card */
  --shadow-lg:   0 8px 32px rgba(77, 67, 115, 0.13);   /* hovered card */
  --shadow-xl:   0 16px 48px rgba(77, 67, 115, 0.16);  /* modal */
  --shadow-card: 0 4px 24px rgba(86, 181, 191, 0.12);  /* teal-tinted card */
  --shadow-card-hover: 0 10px 40px rgba(86, 181, 191, 0.20);
  --shadow-focus: 0 0 0 3px rgba(86, 181, 191, 0.30);  /* focus ring */

  /* ─────────────────────────────────────────────
     9. TRANSITION TOKENS
     ───────────────────────────────────────────── */

  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle spring — use sparingly */

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --transition-color:     color var(--duration-base) var(--ease-out),
                          background-color var(--duration-base) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-all:       all var(--duration-base) var(--ease-out);

}

/* ─────────────────────────────────────────────
   10. BASE RESET + BODY DEFAULTS
   ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-primary);
  background-color: var(--color-bg);
  text-wrap: pretty;
}

/* Heading defaults */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-fg-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
}

h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}

h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
}

h4 {
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  letter-spacing: var(--type-h5-tracking);
  text-transform: uppercase;
}

h6 {
  font-family: var(--font-body);
  font-size: var(--type-h6-size);
  font-weight: var(--type-h6-weight);
  letter-spacing: var(--type-h6-tracking);
  text-transform: uppercase;
}

p {
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-link-hover);
}

/* Section label utility */
.gc-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Container utility */
.gc-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}