/* =========================================================
   Ferrando Jordà & Asociados — Design tokens
   Direcció: Nàutic editorial · Verd marí + grafit + os
   ========================================================= */

:root {
  /* —— Color: paleta primària ——————————————————————————— */
  /* Verd marí profund: el color institucional. */
  --color-deep:        #14322D;   /* British racing green deeper */
  --color-deep-2:      #1B3B36;   /* nucli de la marca */
  --color-deep-3:      #2A4F49;   /* hover / state */

  /* Grafit i neutres foscos */
  --color-graphite:    #1F1E1B;
  --color-charcoal:    #3A3935;

  /* Os / crema editorial */
  --color-bone:        #F4EFE4;   /* fons base */
  --color-bone-2:      #ECE5D5;   /* fons alternatiu */
  --color-paper:       #FAF7EE;   /* paper més clar */
  --color-line:        #D9CFB8;   /* línies subtils */

  /* Accent llautó / coure (només per a detalls editorials) */
  --color-brass:       #B8893C;
  --color-brass-2:     #8E6A2C;
  --color-copper:      #A85B2C;

  /* Estats */
  --color-error:       #8C2A1F;
  --color-success:     #2E5A41;

  /* —— Aliases semàntics —————————————————————————————— */
  --bg-page:           var(--color-bone);
  --bg-deep:           var(--color-deep-2);
  --bg-card:           var(--color-paper);
  --bg-card-deep:      var(--color-deep);

  --text-on-bone:      var(--color-graphite);
  --text-on-bone-soft: #5B5950;
  --text-on-deep:      var(--color-bone);
  --text-on-deep-soft: #CFD9D5;

  --border-soft:       var(--color-line);
  --border-deep:       rgba(244, 239, 228, 0.18);

  --accent:            var(--color-brass);
  --accent-strong:     var(--color-brass-2);

  /* —— Tipografia ——————————————————————————————————— */
  --font-display:      "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (modular, ratio ~1.25 — Major Third) */
  --fs-12:   0.75rem;
  --fs-14:   0.875rem;
  --fs-16:   1rem;
  --fs-18:   1.125rem;
  --fs-20:   1.25rem;
  --fs-24:   1.5rem;
  --fs-30:   1.875rem;
  --fs-36:   2.25rem;
  --fs-48:   3rem;
  --fs-60:   3.75rem;
  --fs-72:   4.5rem;
  --fs-96:   6rem;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* —— Spacing ———————————————————————————————————— */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;
  --space-11:  10rem;

  /* —— Radii ————————————————————————————————————— */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* —— Shadows (sòbries, editorials, sense glow) ———————— */
  --shadow-sm:  0 1px 2px rgba(20, 50, 45, 0.06);
  --shadow-md:  0 4px 18px rgba(20, 50, 45, 0.08);
  --shadow-lg:  0 18px 48px rgba(20, 50, 45, 0.12);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.35);

  /* —— Layout ——————————————————————————————————— */
  --container:        1240px;
  --container-narrow: 880px;
  --container-text:   680px;

  --gutter:           clamp(1rem, 4vw, 2rem);
  --section-y:        clamp(4rem, 10vw, 8rem);

  /* —— 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:    180ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;

  /* —— Z-index ——————————————————————————————————— */
  --z-base:      1;
  --z-sticky:    50;
  --z-overlay:   80;
  --z-modal:     100;
}

/* High-contrast mode: deep version (for hero overlays) */
.theme--deep {
  --bg-page:      var(--bg-deep);
  --text-on-bone: var(--text-on-deep);
  --border-soft:  var(--border-deep);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}