/* Residencial Molise — colour system
 * Base values 1:1 from Brand Book 3.1 "Paleta de Cores".
 * Everything marked (derivada) is a tint/shade computed for UI needs
 * (hover, press, borders, disabled) — not printed in the Brand Book.
 */

:root {
  /* ---- Brand palette (Brand Book 3.1, exact) ---- */
  --molise-terracota: #b35a38;      /* Terracota Molisana */
  --molise-verde: #2d4c3e;          /* Verde Pasto Profundo */
  --molise-ocre: #daa520;           /* Ocre Trigo */
  --molise-bronze: #a67c52;         /* Bronze Marinelli */
  --molise-cinza-pedra: #8c867e;    /* Cinza Pedra Quente */
  --molise-branco-renda: #f9f7f2;   /* Branco Renda */

  /* ---- Terracota scale (derivada) ---- */
  --terracota-50: #fbf1ec;
  --terracota-100: #f2dcd2;
  --terracota-200: #e4b9a5;
  --terracota-300: #d19174;
  --terracota-400: #c27352;
  --terracota-500: #b35a38;         /* = --molise-terracota */
  --terracota-600: #9c4a2c;
  --terracota-700: #7f3b23;
  --terracota-800: #5f2c1b;

  /* ---- Verde scale (derivada) ---- */
  --verde-50: #eef2ef;
  --verde-100: #d8e1db;
  --verde-200: #adc0b5;
  --verde-300: #7d9a8a;
  --verde-400: #4d7161;
  --verde-500: #2d4c3e;             /* = --molise-verde */
  --verde-600: #244033;
  --verde-700: #1b3127;
  --verde-800: #12211a;

  /* ---- Ocre / Bronze accents (derivada) ---- */
  --ocre-100: #f8ecc9;
  --ocre-300: #e9c667;
  --ocre-500: #daa520;             /* = --molise-ocre */
  --ocre-700: #a87c14;
  --ocre-800: #8f6910;              /* (derivada) grau de TEXTO: 5,0:1 sobre branco.
                                       O ocre-700 só alcança 3,78:1 e reprova em corpo de texto. */
  --bronze-100: #eee3d8;
  --bronze-300: #c9ab8b;
  --bronze-500: #a67c52;           /* = --molise-bronze */
  --bronze-700: #7d5c3c;

  /* ---- Warm neutrals: pedra + renda (derivada) ---- */
  --neutral-0: #ffffff;
  --neutral-50: #f9f7f2;           /* = --molise-branco-renda */
  --neutral-100: #f3f0e9;
  --neutral-150: #eae8e1;          /* Brand Book cover ground */
  --neutral-200: #e2ded4;
  --neutral-300: #d0cabd;
  --neutral-400: #aea89e;
  --neutral-500: #8c867e;          /* = --molise-cinza-pedra */
  --neutral-600: #6d6862;
  --neutral-700: #4e4a45;
  --neutral-800: #33302c;
  --neutral-900: #1e1c1a;

  /* ---- Semantic: text ---- */
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-50);
  --text-inverse-muted: #cfc9bd;
  --text-brand: var(--molise-terracota);
  --text-brand-deep: var(--molise-verde);
  --text-accent: var(--ocre-800);
  --text-link: var(--molise-terracota);
  --text-link-hover: var(--terracota-700);

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-muted: var(--neutral-150);
  --surface-brand: var(--molise-terracota);
  --surface-brand-soft: var(--terracota-50);
  --surface-deep: var(--molise-verde);
  --surface-deep-soft: var(--verde-50);
  --surface-stone: var(--molise-cinza-pedra);
  --surface-accent: var(--molise-ocre);
  --surface-overlay: rgba(30, 28, 26, 0.55);

  /* ---- Semantic: borders ---- */
  --border-hairline: rgba(30, 28, 26, 0.08);
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-500);
  --border-brand: var(--molise-terracota);
  --border-inverse: rgba(249, 247, 242, 0.28);

  /* ---- Interaction ---- */
  --action-primary-bg: var(--molise-terracota);
  --action-primary-bg-hover: var(--terracota-600);
  --action-primary-bg-active: var(--terracota-700);
  --action-primary-fg: var(--neutral-50);
  --action-secondary-bg: var(--molise-verde);
  --action-secondary-bg-hover: var(--verde-600);
  --action-secondary-bg-active: var(--verde-700);
  --action-ghost-bg-hover: rgba(179, 90, 56, 0.08);
  --action-disabled-bg: var(--neutral-200);
  --action-disabled-fg: var(--neutral-400);
  --focus-ring: rgba(179, 90, 56, 0.35);

  /* ---- Status (derivada — kept inside the earthy range) ---- */
  --status-success: #4d7161;
  --status-success-soft: #e6ede8;
  --status-warning: #c08a12;
  --status-warning-soft: #f8ecc9;
  --status-danger: #a33a24;
  --status-danger-soft: #f4dcd5;
  --status-info: var(--molise-cinza-pedra);
  --status-info-soft: var(--neutral-150);
}

/* Inverse scope: use on terracota / verde / pedra grounds. */
[data-molise-theme="inverse"] {
  --text-strong: var(--neutral-50);
  --text-body: rgba(249, 247, 242, 0.86);
  --text-muted: rgba(249, 247, 242, 0.62);
  --surface-card: rgba(249, 247, 242, 0.08);
  --border-subtle: rgba(249, 247, 242, 0.2);
  --border-default: rgba(249, 247, 242, 0.32);
  --text-link: var(--neutral-50);
  --text-link-hover: var(--ocre-300);
}


/* Residencial Molise — typography
 * Brand Book 4.1: primary = Cinzel Decorative (400/700/900), secondary = Amicale (Regular).
 * Amicale is substituted by Montserrat here — see tokens/fonts.css.
 */

:root {
  --font-display: "Cinzel Decorative", "Cinzel", "Times New Roman", serif;
  --font-display-plain: "Cinzel", "Times New Roman", serif; /* no swashes: long headings, all-caps runs */
  --font-sans: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif; /* stand-in for Amicale */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Display — Cinzel Decorative, always title/upper case, never long paragraphs */
  --type-display-xl: 700 72px/1.02 var(--font-display);
  --type-display-l: 700 56px/1.06 var(--font-display);
  --type-display-m: 700 40px/1.12 var(--font-display);
  --type-display-s: 700 28px/1.18 var(--font-display);

  /* Headings — Montserrat (Amicale) */
  --type-title-l: 600 24px/1.3 var(--font-sans);
  --type-title-m: 600 20px/1.35 var(--font-sans);
  --type-title-s: 600 17px/1.4 var(--font-sans);

  /* Body */
  --type-body-l: 400 18px/1.65 var(--font-sans);
  --type-body-m: 400 16px/1.65 var(--font-sans);
  --type-body-s: 400 14px/1.6 var(--font-sans);

  /* Utility */
  --type-label: 600 14px/1.2 var(--font-sans);
  --type-label-s: 600 12px/1.2 var(--font-sans);
  --type-caption: 400 12px/1.45 var(--font-sans);
  --type-overline: 600 11px/1.2 var(--font-sans);

  --tracking-display: 0.01em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-overline: 0.18em; /* the brand's signature: wide-tracked uppercase eyebrows */

  --measure-tight: 46ch;
  --measure-default: 62ch;
  --measure-wide: 76ch;
}


/* Residencial Molise — spacing & layout. 4px base, generous vertical rhythm. */

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm — marketing surfaces breathe */
  --section-y-compact: var(--space-16);
  --section-y: var(--space-24);
  --section-y-loose: var(--space-32);

  --gutter-mobile: var(--space-5);
  --gutter-desktop: var(--space-10);

  --container-narrow: 720px;
  --container-text: 900px;
  --container-default: 1200px;
  --container-wide: 1440px;

  --control-height-s: 36px;
  --control-height-m: 44px;
  --control-height-l: 54px;
}


/* Residencial Molise — radii, borders, elevation.
 * The architecture is full of round arches and fluted wood; radii lean generous,
 * and the "arch" tokens reproduce the building's signature opening.
 */

:root {
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Arch motif: top corners fully rounded, base square */
  --radius-arch: 999px 999px 0 0;
  --radius-arch-soft: 200px 200px var(--radius-lg) var(--radius-lg);
  --radius-arch-niche: 50% 50% 0 0 / 34% 34% 0 0;

  --border-width-hairline: 1px;
  --border-width-thin: 1.5px;
  --border-width-thick: 2px;
  --border-width-frame: 3px; /* the painted terracota outline around arches and panels */

  /* Warm, low-contrast elevation — never neutral grey */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(51, 48, 44, 0.06);
  --shadow-sm: 0 2px 6px rgba(51, 48, 44, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(51, 48, 44, 0.14);
  --shadow-lg: 0 20px 44px -14px rgba(51, 48, 44, 0.2);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Protection gradient for text over renders */
  --scrim-bottom: linear-gradient(to top, rgba(30, 28, 26, 0.78) 0%, rgba(30, 28, 26, 0.38) 42%, rgba(30, 28, 26, 0) 100%); /* @kind other */
  --scrim-full: linear-gradient(to right, rgba(30, 28, 26, 0.7), rgba(30, 28, 26, 0.1)); /* @kind other */
}


/* Residencial Molise — motion. Calm and architectural: fades and small rises, no bounce. */

:root {
  --duration-instant: 90ms; /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-reveal: 720ms; /* @kind other */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */
  --ease-in: cubic-bezier(0.5, 0, 1, 1); /* @kind other */

  --transition-control: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-surface: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out); /* @kind other */

  --lift-hover: translateY(-2px); /* @kind other */
  --press-scale: scale(0.985); /* @kind other */
  --image-zoom-hover: scale(1.04); /* @kind other */
}