/* =============================================================================
   NORMAL IS BORING — Design System
   Reverse-engineered from https://normalisboring.es/ (La Negrita)
   An editorial, high-contrast, "quiet luxury" aesthetic:
   - near-monochrome canvas (black / white / cream)
   - one electric-blue + one petrol-teal accent
   - oversized high-contrast serif display type
   - a geometric sans for labels/UI
   - generous negative space, overlapping image grids, mixed orientations

   HOW TO USE (for Claude Code):
   - Drop this file in and import it, OR lift the :root tokens into your setup.
   - A Tailwind v4 @theme block is included at the bottom (commented) so you can
     expose these tokens as utilities (bg-canvas, text-ink, font-display, etc.).
   - The real fonts (Juana, PP Editorial New, Izmir) are COMMERCIAL. Free,
     visually-close fallbacks are wired up below — swap in the licensed fonts
     via @font-face if you own them.
============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLOR — neutrals do the heavy lifting; accents are used sparingly
     (values sampled from the live site's computed styles)
  --------------------------------------------------------------------------- */
  --nib-black:        #000000;   /* true black — page frame / dark sections     */
  --nib-ink:          #191919;   /* primary text on light (softer than pure)    */
  --nib-ink-2:        #212121;   /* secondary near-black text                    */
  --nib-white:        #ffffff;   /* primary light surface                        */
  --nib-cream:        #ece4da;   /* warm off-white — hero / editorial panels     */
  --nib-gray-100:     #f4f4f4;   /* faint gray surface                           */
  --nib-sage:         #d0d5d2;   /* muted green-gray surface                     */
  --nib-gray-500:     #707070;   /* muted UI text / captions                     */
  --nib-ink-70:       rgba(25, 25, 25, 0.7); /* subdued body copy               */
  --nib-scrim:        rgba(0, 0, 0, 0.75);   /* image / overlay scrim           */

  /* Accents — use one at a time, never together at full strength */
  --nib-blue:         #0056a7;   /* electric editorial blue                      */
  --nib-teal:         #1c8a8c;   /* petrol-teal — the signature "dot" accent     */
  --nib-coral:        #db5c59;   /* warm coral/brick highlight                   */
  --nib-pink:         #ffc0cb;   /* soft pink block                              */
  --nib-blue-soft:    #c7d7e9;   /* pale sky-blue block                          */

  /* Semantic aliases (prefer these in components) */
  --canvas:           var(--nib-white);
  --canvas-alt:       var(--nib-cream);
  --canvas-invert:    var(--nib-black);
  --ink:              var(--nib-ink);
  --ink-muted:        var(--nib-gray-500);
  --ink-invert:       var(--nib-white);
  --accent:           var(--nib-teal);
  --accent-strong:    var(--nib-blue);
  --line:             rgba(25, 25, 25, 0.12); /* hairline dividers               */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     3 families, each with a clear job:
     - display  : high-contrast serif, set HUGE (Editorial New)
     - serif    : refined text serif for editorial body / italics (Juana)
     - sans     : geometric sans for labels, nav, meta, buttons (Izmir)
  --------------------------------------------------------------------------- */
  --font-display: "PP Editorial New", "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Juana", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Izmir", "Archivo", "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — captured 1:1 from the site (px), fluid clamps added for display */
  --fs-2xs:   10.5px;
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    20px;
  --fs-lg:    24.75px;
  --fs-xl:    33.75px;
  --fs-2xl:   45px;
  --fs-3xl:   52.5px;
  --fs-4xl:   67.2px;
  --fs-5xl:   97.5px;
  --fs-6xl:   142.5px;
  --fs-7xl:   180px;

  /* Fluid display sizes (responsive versions of the big end of the scale) */
  --fs-display-sm:  clamp(2.5rem, 5vw + 1rem, 4.2rem);   /* ~40 → 67px  */
  --fs-display-md:  clamp(3.5rem, 8vw + 1rem, 6.1rem);   /* ~56 → 97px  */
  --fs-display-lg:  clamp(4.5rem, 12vw + 1rem, 8.9rem);  /* ~72 → 142px */
  --fs-display-xl:  clamp(5rem, 16vw + 1rem, 11.25rem);  /* ~80 → 180px */

  --lh-tight:   0.95;   /* oversized display headings sit very tight            */
  --lh-snug:    1.1;
  --lh-normal:  1.5;    /* body copy is airy                                    */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* used on small uppercase sans labels           */
  --tracking-xwide:  0.18em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* ---------------------------------------------------------------------------
     SPACE / LAYOUT / MOTION
  --------------------------------------------------------------------------- */
  --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;

  --container:      1440px;   /* site is built on a wide editorial grid         */
  --gutter:         clamp(20px, 4vw, 64px);
  --grid-cols:      12;

  --radius-none: 0px;         /* corners are square — no rounding on structure  */
  --radius-pill: 999px;       /* only pills (menu button, cookie CTAs) are round */

  --ease:        cubic-bezier(0.22, 1, 0.36, 1); /* smooth, expensive-feeling   */
  --dur-fast:    240ms;
  --dur:         600ms;
  --dur-slow:    1000ms;
}

/* =============================================================================
   OPTIONAL @font-face — uncomment & point at licensed font files if you own them
============================================================================= */
/*
@font-face { font-family:"PP Editorial New"; src:url("/fonts/PPEditorialNew-Ultralight.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"PP Editorial New"; src:url("/fonts/PPEditorialNew-UltralightItalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"PP Editorial New"; src:url("/fonts/PPEditorialNew-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Juana"; src:url("/fonts/Juana-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Juana"; src:url("/fonts/Juana-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Izmir"; src:url("/fonts/Izmir-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
*/

/* =============================================================================
   BASE
============================================================================= */
* { box-sizing: border-box; }

html { background: var(--canvas-invert); } /* black frame shows during transitions */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--nib-white); }

/* =============================================================================
   TYPE PRIMITIVES
============================================================================= */

/* Oversized editorial display — the site's signature. High contrast serif,
   very tight leading, set BIG. Great for one- or two-word statements. */
.nib-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.nib-display--xl { font-size: var(--fs-display-xl); }
.nib-display--md { font-size: var(--fs-display-md); }
.nib-display--sm { font-size: var(--fs-display-sm); }

/* Editorial italic — the "is" moment; elegant, lowercase, italic serif */
.nib-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}

/* Section heading (mid-size serif) */
.nib-heading {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

/* Body copy — airy, muted, comfortable measure */
.nib-body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--nib-ink-70);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Small UI / nav / meta label — geometric sans, uppercase, tracked out */
.nib-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
}
.nib-label--muted { color: var(--ink-muted); }

/* =============================================================================
   COMPONENTS
============================================================================= */

/* Wide editorial container + 12-col grid */
.nib-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nib-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--gutter);
}

/* Pill button (menu toggle / secondary CTA) — outlined, geometric sans label */
.nib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nib-btn:hover { background: var(--ink); color: var(--canvas); }

/* Solid dark CTA (cookie "Aceptar todo" style) */
.nib-btn--solid {
  background: var(--nib-black);
  color: var(--nib-white);
  border-color: var(--nib-black);
}
.nib-btn--solid:hover { background: transparent; color: var(--nib-black); }

/* Signature accent dot — the teal marker that drifts across the layout */
.nib-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  display: inline-block;
}

/* Editorial image frame — square corners, subtle scrim option, can overlap */
.nib-figure { position: relative; margin: 0; overflow: hidden; }
.nib-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nib-figure--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nib-scrim);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nib-figure--scrim:hover::after { opacity: 0.35; }

/* Overlapping stacked images (mixed portrait/landscape) — a core layout move */
.nib-stack { position: relative; }
.nib-stack > .nib-figure { position: absolute; }

/* Full-bleed dark section (the black break panels) */
.nib-section--dark {
  background: var(--canvas-invert);
  color: var(--ink-invert);
}
.nib-section--cream { background: var(--canvas-alt); }

/* Reveal-on-scroll helper (motion is central to the aesthetic) */
.nib-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.nib-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nib-reveal { opacity: 1; transform: none; transition: none; }
  .hb-marq-in { animation: none; }
}

/* =============================================================================
   TAILWIND v4 — optional. Paste into your globals.css to expose these as tokens.
   Then use: bg-canvas text-ink font-display text-display-lg accent, etc.
============================================================================= */
/*
@theme inline {
  --color-canvas:        #ffffff;
  --color-canvas-alt:    #ece4da;
  --color-canvas-invert: #000000;
  --color-ink:           #191919;
  --color-ink-muted:     #707070;
  --color-accent:        #1c8a8c;
  --color-accent-strong: #0056a7;
  --color-coral:         #db5c59;
  --color-pink:          #ffc0cb;
  --color-blue-soft:     #c7d7e9;
  --color-sage:          #d0d5d2;

  --font-display: "PP Editorial New", "Fraunces", Georgia, serif;
  --font-serif:   "Juana", "Playfair Display", Georgia, serif;
  --font-sans:    "Izmir", "Archivo", "Helvetica Neue", Arial, sans-serif;

  --text-display-sm: clamp(2.5rem, 5vw + 1rem, 4.2rem);
  --text-display-md: clamp(3.5rem, 8vw + 1rem, 6.1rem);
  --text-display-lg: clamp(4.5rem, 12vw + 1rem, 8.9rem);
  --text-display-xl: clamp(5rem, 16vw + 1rem, 11.25rem);
}
*/