/* ============================================================
   Destino Falls — Colors & Type Foundations
   ============================================================
   Brand: Travel / tourism. Portuguese-language brand.
   Source: uploads/guia-de-marca.png (brand guide)

   Brand palette (from the guide):
     - Teal "Destino Blue":  #0085AD  (RGB 0,133,173 / CMYK 100,23,0,32)
     - White:                #FFFFFF  (RGB 255,255,255)

   The guide is a two-color system. We extend it with a harmonious
   tonal range + neutral grays for UI use, but the two brand colors
   must always dominate (esp. for marketing).

   Typography:
     - Display: "Organo" (brand guide calls this out). Organo is a
       quirky, rounded, organic display face. We load it if present
       locally; otherwise we fall back to Fredoka (Google Fonts) —
       the closest widely-available rounded geometric display.
       >>> SUBSTITUTION FLAG: if you have the Organo .otf/.ttf, drop
       it in /fonts/Organo.woff2 and the @font-face below picks it up.
     - Text: Nunito — a friendly, rounded sans that harmonizes with
       Organo's soft curves. Used for all UI, body, and micro copy.
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap");

/* Local Organo if available — otherwise Fredoka is used via the stack */
@font-face {
  font-family: "Organo";
  src: url("./fonts/Organo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Brand core ===== */
  --brand-teal: #0085AD;           /* primary */
  --brand-white: #FFFFFF;

  /* ===== Teal tonal scale (derived, harmonious) ===== */
  --teal-50:  #E6F4F9;
  --teal-100: #C2E3EE;
  --teal-200: #8ECDDF;
  --teal-300: #55B4CE;
  --teal-400: #1F9CBE;
  --teal-500: #0085AD;             /* = brand-teal */
  --teal-600: #006E92;
  --teal-700: #005674;
  --teal-800: #003F56;
  --teal-900: #002838;

  /* ===== Neutrals (cool-leaning to match teal) ===== */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7FAFB;
  --neutral-100: #EEF2F4;
  --neutral-200: #DCE3E7;
  --neutral-300: #BCC7CD;
  --neutral-400: #8A98A0;
  --neutral-500: #5D6C74;
  --neutral-600: #3F4C53;
  --neutral-700: #2A353B;
  --neutral-800: #18222A;
  --neutral-900: #0B1418;

  /* ===== Semantic accents (used sparingly — brand is 2-color) ===== */
  --sun:    #F2B544;               /* warm sand / beach */
  --coral:  #E76E5B;               /* sunset accent */
  --leaf:   #4EA87B;               /* success / nature */
  --error:  #D04A3C;

  /* ===== Semantic tokens ===== */
  --bg:          var(--neutral-0);
  --bg-muted:    var(--neutral-50);
  --bg-brand:    var(--brand-teal);
  --bg-brand-soft: var(--teal-50);

  --surface:     var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunk:   var(--neutral-50);

  --fg:          var(--neutral-800);
  --fg-muted:    var(--neutral-500);
  --fg-subtle:   var(--neutral-400);
  --fg-on-brand: var(--brand-white);
  --fg-brand:    var(--brand-teal);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--teal-300);

  /* ===== Type families ===== */
  --font-display: "Organo", "Fredoka", "Nunito", system-ui, -apple-system, sans-serif;
  --font-sans:    "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Type scale (fluid-friendly, rem-based) ===== */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */
  --text-6xl:  4.75rem;   /* 76 */

  --lh-tight:  1.1; /* @kind other */
  --lh-snug:   1.25; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-loose:  1.7; /* @kind other */

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

  /* ===== Spacing (4px base) ===== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ===== Radii — soft & round, matching logo curves ===== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-2xl: 40px;
  --radius-pill: 9999px;

  /* ===== Shadows — soft, cool-tinted (not neutral-gray) ===== */
  --shadow-xs: 0 1px 2px rgba(0, 64, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 64, 88, 0.08);
  --shadow-md: 0 8px 20px rgba(0, 64, 88, 0.10);
  --shadow-lg: 0 18px 40px rgba(0, 64, 88, 0.14);
  --shadow-xl: 0 30px 70px rgba(0, 64, 88, 0.18);
  --shadow-brand: 0 14px 36px rgba(0, 133, 173, 0.30);

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ===== Layout ===== */
  --container:       1200px;
  --container-wide:  1440px;
  --container-narrow: 720px;
}

/* ============================================================
   Semantic type utilities — use these instead of reinventing
   ============================================================ */

.df-display,
h1.df-h1 {
  font-family: var(--font-display);
  font-weight: 400;                 /* Organo has one weight */
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .df-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .df-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h3, .df-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .df-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.df-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .df-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.df-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

small, .df-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.df-caption {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

code, .df-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--bg-muted);
  border-radius: var(--radius-xs);
}

/* Base reset-ish */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}