/* ============================================================
   MutuoClick — Design tokens (merged entry point)
   Brand source: sito MutuoClick (tema cercamutuo)
   Primari:   Blu MutuoClick   #12326e
              Oro MutuoClick   #d5a719
   Secondari: Grigio scuro     #1a1a1a
              Azzurro          #3c98e4

   Variante brandizzata dei token Credipass: stessa struttura e
   stessi nomi di variabile (così CSS/JS condivisi restano validi),
   cambiano solo gli anchor di brand (scale blu/oro).

   This file merges the design-system token layers
   (fonts → colors → typography → spacing → base) so any page
   linking it inherits the brand foundations.
   ⚠ "Circular" is a paid typeface; Montserrat is the
   manual-sanctioned free substitute and is what ships here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=DM+Serif+Text:ital@0;1&display=swap');

:root {
  /* ---- Brand blue (Blu MutuoClick #12326e) — primary ---- */
  --blue-950: #061027;
  --blue-900: #0a1c44;
  --blue-800: #12326e; /* ◆ brand primary */
  --blue-700: #1d4488;
  --blue-600: #2a5bb0;
  --blue-500: #3c98e4; /* ◆ Azzurro (secondary) */
  --blue-400: #6fb3ec;
  --blue-300: #a6d0f4;
  --blue-200: #c5d9eb;
  --blue-100: #e8f1fa;
  --blue-50:  #f2f7fc;

  /* ---- Brand gold (Oro MutuoClick #d5a719) — accent ---- */
  --gold-800: #75590a;
  --gold-700: #977207;
  --gold-600: #b48b0d;
  --gold-500: #d5a719; /* ◆ brand accent */
  --gold-400: #e2bc45;
  --gold-300: #ecd277;
  --gold-200: #f5e6ad;
  --gold-100: #fbf4d8;
  --gold-50:  #fdfaee;

  /* ---- Neutrals (Grigio scuro #1a1a1a base) ---- */
  --gray-950: #0f0f11;
  --gray-900: #1a1a1a; /* ◆ Grigio scuro */
  --gray-800: #2f3035;
  --gray-700: #494b52;
  --gray-600: #65676f;
  --gray-500: #868992;
  --gray-400: #a9abb3;
  --gray-300: #c9cbd1;
  --gray-200: #e3e5e9;
  --gray-150: #ecedf1;
  --gray-100: #f4f5f7;
  --gray-50:  #fafbfc;
  --white:    #ffffff;
  --black:    #000000;

  /* ---- Semantic status ---- */
  --green-600: #1f8a4d;
  --green-500: #27a35c;
  --green-100: #e4f5eb;
  --red-600:   #c5392f;
  --red-500:   #e2483d;
  --red-100:   #fcebe9;
  --amber-500: #d5a719; /* warning uses brand gold */
  --amber-100: #fbf4d8;

  /* ---- Semantic aliases (reference these in product code) ---- */
  /* Brand */
  --color-primary:         var(--blue-800);
  --color-primary-hover:   #0e2858;
  --color-primary-active:  #0a1c44;
  --color-primary-soft:    var(--blue-100);
  --color-secondary:       var(--blue-500);
  --color-secondary-hover: #2f87d2;
  --color-accent:          var(--gold-500);
  --color-accent-hover:    var(--gold-600);
  --color-accent-soft:     var(--gold-100);

  /* Text */
  --text-strong:    var(--gray-900);
  --text-body:      var(--gray-800);
  --text-muted:     var(--gray-600);
  --text-subtle:    var(--gray-500);
  --text-on-brand:  var(--white);
  --text-on-accent: var(--blue-900);
  --text-link:      var(--blue-600);

  /* Surfaces */
  --surface-page:        var(--gray-50);
  --surface-card:        var(--white);
  --surface-sunken:      var(--gray-100);
  --surface-brand:       var(--blue-800);
  --surface-brand-deep:  var(--blue-950);
  --surface-tint:        var(--blue-50);
  --surface-accent-tint: var(--gold-50);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--blue-800);
  --border-focus:   var(--blue-500);

  /* Status semantics */
  --color-success:      var(--green-500);
  --color-success-soft: var(--green-100);
  --color-danger:       var(--red-500);
  --color-danger-soft:  var(--red-100);
  --color-warning:      var(--amber-500);
  --color-warning-soft: var(--amber-100);
  --color-info:         var(--blue-500);
  --color-info-soft:    var(--blue-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(60, 152, 228, 0.45);

  /* ---- Typography ---- */
  --font-sans: 'Montserrat', 'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);
  --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-3xs: 0.6875rem;  /* 11 */
  --text-2xs: 0.75rem;    /* 12 */
  --text-xs:  0.8125rem;  /* 13 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.375rem;   /* 22 */
  --text-xl:  1.75rem;    /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 2.875rem;   /* 46 */
  --text-4xl: 3.75rem;    /* 60 */
  --text-5xl: 4.75rem;    /* 76 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Shadows (soft, cool blue undertone) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 26, 68, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 26, 68, 0.07);
  --shadow-md: 0 8px 20px rgba(0, 26, 68, 0.09);
  --shadow-lg: 0 16px 40px rgba(0, 26, 68, 0.12);
  --shadow-xl: 0 28px 64px rgba(0, 26, 68, 0.16);
  --shadow-focus: var(--focus-ring);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --header-height: 76px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ============================================================
   Base layer
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; }

.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

::selection { background: var(--blue-200); color: var(--blue-900); }