/* ============================================================
   PIATTO AGENCY — Colors & Type
   Marketing agency specialized in hospitality (hostelería).
   ============================================================ */

/* ---------- FONTS ----------
   Primary:   Gotham Condensed   (4 weights: Light 300, Book 400, Medium 500, Bold 700)
   Secondary: Perandory          (Regular, Semi-Condensed, Condensed)
   Files live in /fonts. Self-hosted via @font-face below.
*/
@font-face {
  font-family: 'Gotham Condensed';
  src: url('fonts/Gotham_Condensed_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Condensed';
  src: url('fonts/Gotham_Condensed_Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Condensed';
  src: url('fonts/Gotham_Condensed_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Condensed';
  src: url('fonts/Gotham_Condensed_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perandory';
  src: url('fonts/Perandory-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perandory';
  src: url('fonts/Perandory-Semi-Condensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-stretch: 87.5%;
  font-display: swap;
}
@font-face {
  font-family: 'Perandory';
  src: url('fonts/Perandory-Condensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-stretch: 75%;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --piatto-blue:       #0c3274;   /* Logo principal — primary navy */
  --piatto-cream:      #eeebe3;   /* Fondo — signature off-white background */
  --piatto-slate:      #6d7888;   /* Secundario — muted blue-grey */
  --piatto-black:      #000000;
  --piatto-white:      #ffffff;

  /* Tonal range derived from --piatto-blue (oklch) for hovers / surfaces */
  --piatto-blue-900:   oklch(28% 0.10 260);
  --piatto-blue-800:   oklch(32% 0.12 260);   /* base navy */
  --piatto-blue-700:   oklch(38% 0.13 260);
  --piatto-blue-200:   oklch(82% 0.04 260);
  --piatto-blue-100:   oklch(92% 0.02 260);

  /* Tonal range for the cream background */
  --piatto-cream-deep: #e3dfd1;
  --piatto-cream-soft: #f5f3ec;

  /* ---------- SEMANTIC ---------- */
  --bg:                var(--piatto-cream);
  --bg-elevated:       var(--piatto-white);
  --bg-inverse:        var(--piatto-blue);

  --fg:                var(--piatto-blue);     /* on cream */
  --fg-muted:          var(--piatto-slate);
  --fg-on-blue:        var(--piatto-cream);    /* cream on blue, never pure white */
  --fg-on-blue-muted:  rgba(238, 235, 227, 0.7);

  --border:            rgba(12, 50, 116, 0.18);
  --border-strong:     var(--piatto-blue);
  --border-on-blue:    rgba(238, 235, 227, 0.25);

  --accent:            var(--piatto-blue);
  --accent-soft:       rgba(12, 50, 116, 0.08);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:      'Gotham Condensed', 'Barlow Condensed', 'Oswald', 'Helvetica Neue Condensed', sans-serif;
  --font-serif:        'Perandory', 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-body:         'Gotham Condensed', 'Barlow Condensed', system-ui, sans-serif;

  /* Display sizes — bold condensed, tight tracking, hero-scale */
  --fs-display-xl:     clamp(72px, 12vw, 180px);
  --fs-display-lg:     clamp(56px, 8vw, 120px);
  --fs-display-md:     clamp(40px, 5vw, 72px);

  /* Headings */
  --fs-h1:             clamp(40px, 5vw, 72px);
  --fs-h2:             clamp(32px, 4vw, 56px);
  --fs-h3:             clamp(24px, 2.6vw, 36px);
  --fs-h4:             20px;
  --fs-h5:             16px;

  /* Body */
  --fs-body-lg:        20px;
  --fs-body:           17px;
  --fs-body-sm:        15px;
  --fs-caption:        13px;
  --fs-eyebrow:        12px;

  /* Tracking */
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;     /* labels, eyebrows */

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-pill:  999px;
  /* Note: Piatto leans editorial / classic — sharp corners (0–4px) are the default. */

  /* ---------- SHADOWS ---------- */
  --shadow-sm:   0 1px 2px rgba(12, 50, 116, 0.06);
  --shadow-md:   0 4px 16px rgba(12, 50, 116, 0.08);
  --shadow-lg:   0 16px 48px rgba(12, 50, 116, 0.12);
  --shadow-card: 0 1px 0 rgba(12, 50, 116, 0.06), 0 8px 24px rgba(12, 50, 116, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ============================================================
   BASE / SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--piatto-blue);
  color: var(--piatto-cream);
}

/* ---- DISPLAY (giant condensed wordmarks) ---- */
.display-xl,
.display-lg,
.display-md {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 0.92;
  color: var(--piatto-blue);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }

/* ---- HEADINGS ---- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.0;
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2);
}

/* ---- SERIF ACCENTS (used sparingly: dates, ESTD., italic asides) ---- */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ---- BODY ---- */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

/* ---- EYEBROWS / LABELS — uppercase tracked condensed ---- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

/* ---- LINKS ---- */
a {
  color: var(--piatto-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

/* ---- INVERSE (on blue background) ---- */
.on-blue {
  background: var(--piatto-blue);
  color: var(--fg-on-blue);
}
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4,
.on-blue p,  .on-blue a { color: var(--fg-on-blue); }
.on-blue .eyebrow { color: var(--fg-on-blue-muted); }

/* ---- DIVIDERS (thin hairlines, classic) ---- */
hr, .divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}
.on-blue hr, .on-blue .divider { border-top-color: var(--border-on-blue); }