/**
 * Bonus Immobiliare — Design System tokens (canonical SoT)
 * Adattato da assets/design-system/extracted/project/colors_and_type.css
 * v2.0.0 — 2026-05-25 (DS migration Wave 0)
 *
 * Vedi: docs/decisions/2026-05-25-token-canonical-values.md per ADR.
 * Vedi: docs/plans/2026-05-25-feat-design-system-migration-plan.md per migration path.
 *
 * Warm Editorial Aesthetic. Olive family + Overlock display + Source Serif 4 body.
 * Mobile-first. Tier 1 primitive (--olive-deep) + Tier 2 semantic (--bg-page, --fg-heading, --accent-primary).
 *
 * Layer order canonical (2026): tokens, reset, base, layout, components, utilities, overrides.
 * Components consume ONLY Tier 2 semantic vars. Stylelint enforces (scripts/audit-tokens.sh).
 */

@layer tokens, reset, base, layout, components, utilities, overrides;

/* ========================================================
   Webfonts — self-hosted WOFF2 subset Latin
   Display: Overlock — 6 weights (400/700/900 + italics), ~12KB each gzipped
   Body:    Source Serif 4 — Google Fonts CDN
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap');

@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal;
  font-display: optional; /* LCP-critical: never recalculate post-swap */
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Overlock';
  src: url('/assets/fonts/Overlock-BlackItalic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2074, U+20AC, U+2122;
}

/* Capsize fallback overrides — elimina CLS swap (Georgia → Overlock)
   Auto-generated da scripts/compute-font-overrides.mjs. Regenerate con: node scripts/compute-font-overrides.mjs */
@font-face {
  font-family: 'Overlock Fallback';
  src: local('Georgia');
  ascent-override: 106.3317%;
  descent-override: 27.9589%;
  size-adjust: 90.8478%;
}

:root {
    /* ============================================
       PRIMARY — Olive family (brand)
       ============================================ */
    --olive: #5C6B4A;          /* Primary brand */
    --olive-deep: #3D4832;     /* Hero gradient top, headings */
    --olive-dark: #2A3223;     /* Footer, deepest tone */
    --olive-light: #7A8A68;    /* Hover, hero gradient bottom */
    --sage: #8A9A78;           /* Decorative */
    --sage-pale: #D4DEC9;      /* Card backgrounds, hero italic text */
    --sage-mist: #E8EEE0;      /* Icon backgrounds, blockquotes */

    /* ============================================
       NEUTRALS — Warm, paper-like
       ============================================ */
    --cream: #FAF7F2;          /* Page background */
    --cream-dark: #F2EDE4;     /* Input backgrounds, dividers */
    --parchment: #EDE7DB;      /* Alternate sections */
    --stone: #DAD7CD;          /* Borders, dividers, meta */
    --earth: #8B8178;          /* Secondary text */
    --bark: #4A3F35;           /* Primary body text */

    /* ============================================
       ACCENTS
       ============================================ */
    --terracotta: #F06543;       /* Primary CTA, links, accent */
    --terracotta-light: #F4846A; /* Hover state */
    --terracotta-pale: #F5E6DF;  /* Badge backgrounds */
    --gold: #BFA67A;             /* Tags, eyebrow text on dark */
    --gold-light: #D4C4A0;       /* Hover, italic on dark */
    --gold-pale: #F5F0E5;        /* Info-box backgrounds, highlights */
    --tabacco: #8B6F47;          /* Tag Affitto — warm tobacco (promoted from inline) */

    /* ============================================
       PER-CITY ACCENTS (landing pages)
       Used as `--city-accent` overrides on calculator
       landing pages. One per city.
       ============================================ */
    --city-milano:   #4A4458;  /* graphite — Duomo stone */
    --city-roma:     #A0522D;  /* sienna — Tiber */
    --city-torino:   #6B4A5C;  /* aubergine — colline dusk */
    --city-firenze:  #C49A4B;  /* cupola gold */
    --city-bologna:  #B7410E;  /* brick — portico red */
    --city-napoli:   #8B3A2C;  /* vesuvio rust */

    /* ============================================
       SEMANTIC — derived (use these in components)
       ============================================ */
    --bg-page: var(--cream);
    --bg-surface: #FFFFFF;
    --bg-surface-alt: var(--parchment);
    --bg-inverse: var(--olive-deep);

    --fg-default: var(--bark);
    --fg-muted: var(--earth);
    --fg-subtle: var(--stone);
    --fg-heading: var(--olive-deep);
    --fg-link: var(--terracotta);
    --fg-link-hover: var(--terracotta-light);
    --fg-on-dark: var(--cream);

    --border-default: var(--stone);
    --border-subtle: var(--cream-dark);
    --border-strong: var(--olive);

    --accent-primary: var(--terracotta);
    --accent-primary-hover: var(--terracotta-light);
    --accent-secondary: var(--olive);
    --accent-decoration: var(--gold);

    /* ============================================
       TYPOGRAPHY
       Display: Overlock — uploaded brand font.
                Weights available: 400 / 700 / 900.
                Use 700 where Overlock had 500 (Overlock runs lighter).
       Body:    Source Serif 4 — Google Fonts.
       ============================================ */
    --font-display: 'Overlock', 'Overlock Fallback', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;

    /* Fluid scale — clamps used in production for hero/section titles */
    --text-hero: clamp(2.5rem, 6vw, 4.5rem);      /* Homepage hero */
    --text-section: clamp(2rem, 4vw, 3rem);       /* Section titles */
    --text-article-h1: clamp(1.75rem, 4vw, 2.75rem);

    /* Fixed scale */
    --text-xs: 0.75rem;     /* 12px — micro labels */
    --text-sm: 0.875rem;    /* 14px — meta, nav */
    --text-base: 1rem;      /* 16px */
    --text-body: 1.0625rem; /* 17px — blog body */
    --text-body-lg: 1.125rem; /* 18px — homepage body */
    --text-lg: 1.25rem;     /* 20px — hero subtitle */
    --text-xl: 1.5rem;      /* 24px — featured card title */
    --text-2xl: 1.75rem;    /* 28px — large featured */
    --text-3xl: 2rem;       /* 32px — H2 */

    /* Line heights */
    --leading-tight: 1.1;     /* Hero */
    --leading-snug: 1.2;      /* Headings */
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;   /* Body (homepage) */
    --leading-loose: 1.8;     /* Blog article body */

    /* Weights — Overlock available: 400 / 700 / 900. Source Serif 4 full range. */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 400;     /* Overlock has no 500 — fall back to 400 */
    --weight-semibold: 600;
    --weight-bold: 700;       /* Default headings (Overlock 700) */
    --weight-black: 900;      /* Display extreme — hero headlines if needed */

    /* Letter-spacing — uppercase eyebrows use generous tracking */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;     /* Tags */
    --tracking-widest: 0.15em;   /* Eyebrow labels */
    --tracking-extreme: 0.2em;   /* Section labels */

    /* ============================================
       SPACING — 0.25rem step, mostly 4/8/16/24/32/48/64/96/128
       ============================================ */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    --space-5xl: 8rem;     /* 128px */

    /* ============================================
       BORDER RADIUS — generous, organic. Pills are common.
       ============================================ */
    --radius-sm: 0.5rem;    /* 8px — small chips, tag pills */
    --radius-md: 1rem;      /* 16px — cards, inputs */
    --radius-lg: 1.5rem;    /* 24px — large cards, CTA boxes */
    --radius-xl: 2rem;      /* 32px — hero panels */
    --radius-full: 9999px;  /* Buttons, chips, search */

    /* ============================================
       SHADOWS — warm, bark-tinted (not pure black)
       ============================================ */
    --shadow-soft:    0 2px 20px rgba(74, 63, 53, 0.06);
    --shadow-medium:  0 4px 30px rgba(74, 63, 53, 0.10);
    --shadow-lifted:  0 12px 40px rgba(74, 63, 53, 0.12);
    --shadow-cta:     0 10px 30px rgba(240, 101, 67, 0.35);  /* terracotta button hover */
    --shadow-cta-soft:0 4px 20px rgba(240, 101, 67, 0.40);

    /* ============================================
       MOTION
       ============================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ============================================
       LAYOUT
       ============================================ */
    --max-width: 1200px;
    --max-width-narrow: 800px;
    --max-width-article: 720px;
    --header-height: 80px;

    /* ============================================
       Z-INDEX
       ============================================ */
    --z-header: 1100;
    --z-mobile-menu: 1099;
    --z-filter-bar: 50;
    --z-modal: 2000;
    --z-toast: 10000;
}

/* ============================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these by including colors_and_type.css.
   Components can layer on top.
   ============================================ */

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--fg-default);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Paper texture overlay — signature element. Apply on <body> on key pages. */
.has-paper-texture::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    z-index: var(--z-toast);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);     /* Overlock looks airy at 400 — use 700 for headings */
    line-height: var(--leading-snug);
    color: var(--fg-heading);
    letter-spacing: -0.005em;
}
h1 { font-size: var(--text-article-h1); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }


/* End of tokens.css canonical — see ADR docs/decisions/2026-05-25-token-canonical-values.md */