/* =========================================================================
   Castro & Partners — Design Tokens
   Colors, typography, spacing, radii, shadows.
   ========================================================================= */

/* Webfonts: served via Google Fonts CDN.
   Montserrat → headings & display (matches the heavy geometric wordmark).
   Inter       → body, UI, captions.
   --- Note: the live Castro & Partners site is built on Elementor with
   "google_font-enabled". The exact production faces are not exposed in the
   page source, so Montserrat (Black/ExtraBold) is used as the closest
   visual match to the "CASTRO & PARTNERS" wordmark. Flagged as a
   substitution — see README.md > Visual Foundations > Type. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------------------------------------------------------------------
     Color — Brand
     The primary navy is sampled directly from the brand mark (#004F85).
     The deep-blue family is the only colored hue in the system; everything
     else is grayscale. This restraint is intentional — it reads as
     "consulting/finance" rather than "tech startup".
     --------------------------------------------------------------------- */
  --cp-brand-900: #00263F;   /* darkest navy — deep accents, body on light */
  --cp-brand-800: #003560;
  --cp-brand-700: #004F85;   /* PRIMARY brand blue (from logo)            */
  --cp-brand-600: #1A6BA0;
  --cp-brand-500: #4A8EBC;
  --cp-brand-400: #82B0D2;
  --cp-brand-300: #B6D0E3;
  --cp-brand-200: #DCE8F1;
  --cp-brand-100: #EEF4F8;   /* faint wash — section backgrounds          */
  --cp-brand-050: #F6F9FB;

  /* ---------------------------------------------------------------------
     Color — Neutrals
     A long, even grayscale. Black is used liberally for headings; white is
     the dominant surface.
     --------------------------------------------------------------------- */
  --cp-ink:        #0B0B0C;  /* near-black — headings, wordmark           */
  --cp-ink-2:      #1A1A1C;  /* body text                                 */
  --cp-gray-900:   #2B2B2E;
  --cp-gray-800:   #444448;
  --cp-gray-700:   #5C5C61;
  --cp-gray-600:   #696970;  /* tertiary text/captions — WCAG AA su tutti i bg chiari (era #757579, 4.14 su brand-100) */
  --cp-gray-500:   #9A9A9E;
  --cp-gray-400:   #BDBDC1;  /* hairline borders                          */
  --cp-gray-300:   #D9D9DC;
  --cp-gray-200:   #EAEAEC;
  --cp-gray-100:   #F2F2F4;  /* card backgrounds on white                 */
  --cp-gray-050:   #F8F8FA;
  --cp-white:      #FFFFFF;

  /* Warm off-white that sits next to navy without looking "celestino".
     Used for press / strip backgrounds where light is needed but the
     brand-100 wash reads too cold against the brand-700/900 navy. */
  --cp-warm-050:   #F7F5F1;
  --cp-warm-100:   #EFEBE3;

  /* ---------------------------------------------------------------------
     Color — Semantic / status (used sparingly — mostly in UI kit forms)
     --------------------------------------------------------------------- */
  --cp-success:    #1F8A5B;
  --cp-warning:    #C68A1F;
  --cp-danger:     #B23B3B;
  --cp-info:       var(--cp-brand-700);

  /* ---------------------------------------------------------------------
     Foreground / background semantic aliases
     --------------------------------------------------------------------- */
  --cp-fg-1:       var(--cp-ink);          /* primary text                */
  --cp-fg-2:       var(--cp-gray-700);     /* secondary text              */
  --cp-fg-3:       var(--cp-gray-600);     /* tertiary, captions          */
  --cp-fg-invert:  var(--cp-white);
  --cp-fg-accent:  var(--cp-brand-700);

  --cp-bg-1:       var(--cp-white);        /* base surface                */
  --cp-bg-2:       var(--cp-gray-050);     /* alt surface                 */
  --cp-bg-3:       var(--cp-gray-100);
  --cp-bg-dark:    var(--cp-brand-900);    /* dark hero / footer          */
  --cp-bg-accent:  var(--cp-brand-700);

  --cp-border:     var(--cp-gray-300);
  --cp-border-strong: var(--cp-gray-400);
  --cp-border-accent: var(--cp-brand-700);

  /* ---------------------------------------------------------------------
     Type
     --------------------------------------------------------------------- */
  --cp-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --cp-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display weights (matching the heavy wordmark) */
  --cp-w-regular:  400;
  --cp-w-medium:   500;
  --cp-w-semibold: 600;
  --cp-w-bold:     700;
  --cp-w-xbold:    800;
  --cp-w-black:    900;

  /* Type scale (1.25 modular — designed for 16px base) */
  --cp-fs-12:  0.75rem;   /* 12px caption / micro                          */
  --cp-fs-14:  0.875rem;  /* 14px UI label                                 */
  --cp-fs-16:  1rem;      /* 16px body                                     */
  --cp-fs-18:  1.125rem;  /* 18px body lead                                */
  --cp-fs-20:  1.25rem;
  --cp-fs-24:  1.5rem;    /* h5                                            */
  --cp-fs-28:  1.75rem;   /* h4                                            */
  --cp-fs-32:  2rem;      /* h3                                            */
  --cp-fs-40:  2.5rem;    /* h2                                            */
  --cp-fs-56:  3.5rem;    /* h1                                            */
  --cp-fs-72:  4.5rem;    /* hero display                                  */

  --cp-lh-tight:  1.08;
  --cp-lh-snug:   1.2;
  --cp-lh-normal: 1.45;
  --cp-lh-relaxed: 1.6;

  --cp-tracking-tight: -0.01em;
  --cp-tracking-wide:  0.04em;
  --cp-tracking-wider: 0.12em;  /* small eyebrow labels                    */

  /* ---------------------------------------------------------------------
     Spacing — 4px base
     --------------------------------------------------------------------- */
  --cp-space-1:  4px;
  --cp-space-2:  8px;
  --cp-space-3:  12px;
  --cp-space-4:  16px;
  --cp-space-5:  20px;
  --cp-space-6:  24px;
  --cp-space-8:  32px;
  --cp-space-10: 40px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-20: 80px;
  --cp-space-24: 96px;
  --cp-space-32: 128px;

  /* ---------------------------------------------------------------------
     Radii — Italian-corporate restraint. Mostly rectangular.
     --------------------------------------------------------------------- */
  --cp-radius-0:    0px;     /* default for buttons / hero blocks         */
  --cp-radius-sm:   2px;     /* fields, chips                             */
  --cp-radius-md:   4px;     /* cards                                     */
  --cp-radius-lg:   8px;     /* large feature cards                       */
  --cp-radius-pill: 999px;   /* tags, status pills                        */

  /* ---------------------------------------------------------------------
     Shadows — subtle, never glow-y
     --------------------------------------------------------------------- */
  --cp-shadow-1: 0 1px 2px rgba(11, 11, 12, 0.04), 0 1px 1px rgba(11, 11, 12, 0.06);
  --cp-shadow-2: 0 2px 6px rgba(11, 11, 12, 0.06), 0 4px 12px rgba(11, 11, 12, 0.06);
  --cp-shadow-3: 0 6px 16px rgba(11, 11, 12, 0.08), 0 12px 28px rgba(11, 11, 12, 0.08);
  --cp-shadow-focus: 0 0 0 3px rgba(0, 79, 133, 0.25);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --cp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --cp-dur-fast: 120ms;
  --cp-dur-base: 200ms;
  --cp-dur-slow: 360ms;

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  /* Container TRUE full-width.
     Niente max-width: il sito sfrutta sempre tutta la larghezza disponibile,
     anche su monitor 1920+. La leggibilità viene gestita dai max-width interni
     dei singoli componenti (text columns ~70ch, intro 720px). */
  --cp-container-narrow: 920px;
  --cp-container:        100%;
  --cp-container-wide:   100%;
  --cp-gutter:           clamp(20px, 4vw, 96px);
}

/* =========================================================================
   Semantic typography — defaults for raw HTML elements
   ========================================================================= */

html, body {
  font-family: var(--cp-font-body);
  font-size: var(--cp-fs-16);
  line-height: var(--cp-lh-normal);
  color: var(--cp-fg-1);
  background: var(--cp-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .cp-display {
  font-family: var(--cp-font-display);
  color: var(--cp-fg-1);
  margin: 0;
  text-wrap: balance;
}

.cp-display, h1 {
  font-size: var(--cp-fs-56);
  font-weight: var(--cp-w-black);
  line-height: var(--cp-lh-tight);
  letter-spacing: var(--cp-tracking-tight);
}

h2 {
  font-size: var(--cp-fs-40);
  font-weight: var(--cp-w-xbold);
  line-height: var(--cp-lh-snug);
  letter-spacing: var(--cp-tracking-tight);
}

h3 {
  font-size: var(--cp-fs-32);
  font-weight: var(--cp-w-bold);
  line-height: var(--cp-lh-snug);
}

h4 {
  font-size: var(--cp-fs-24);
  font-weight: var(--cp-w-bold);
  line-height: var(--cp-lh-snug);
}

h5 {
  font-size: var(--cp-fs-20);
  font-weight: var(--cp-w-semibold);
  line-height: var(--cp-lh-snug);
}

h6, .cp-eyebrow {
  font-size: var(--cp-fs-14);
  font-weight: var(--cp-w-bold);
  line-height: var(--cp-lh-normal);
  letter-spacing: var(--cp-tracking-wider);
  text-transform: uppercase;
  color: var(--cp-brand-700);
}

p, .cp-body {
  font-size: var(--cp-fs-16);
  line-height: var(--cp-lh-relaxed);
  color: var(--cp-fg-2);
  margin: 0 0 var(--cp-space-4);
}

.cp-lead {
  font-size: var(--cp-fs-20);
  line-height: var(--cp-lh-relaxed);
  color: var(--cp-fg-2);
  font-weight: var(--cp-w-regular);
}

.cp-caption {
  font-size: var(--cp-fs-12);
  line-height: var(--cp-lh-normal);
  color: var(--cp-fg-3);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
}

small, .cp-small {
  font-size: var(--cp-fs-14);
  color: var(--cp-fg-3);
}

code, .cp-mono {
  font-family: var(--cp-font-mono);
  font-size: 0.9em;
}

a {
  color: var(--cp-brand-700);
  text-decoration: none;
  transition: color var(--cp-dur-fast) var(--cp-ease-out);
}
a:hover { color: var(--cp-brand-800); text-decoration: underline; }