/* ─────────────────────────────────────────────────────────────────────────────
   Material Design 3 — Terravinci theme
   Source color: #7B6E63 (Terravinci warm brown)
   Tonal palettes generadas siguiendo MD3 baseline scheme.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color system: light scheme ─────────────────────────────────────────── */
  --md-sys-color-primary:                       #735A48;
  --md-sys-color-on-primary:                    #FFFFFF;
  --md-sys-color-primary-container:             #FFDCC4;
  --md-sys-color-on-primary-container:          #2A1708;

  --md-sys-color-secondary:                     #735946;
  --md-sys-color-on-secondary:                  #FFFFFF;
  --md-sys-color-secondary-container:           #FFDCC4;
  --md-sys-color-on-secondary-container:        #2A1708;

  --md-sys-color-tertiary:                      #5F6135;
  --md-sys-color-on-tertiary:                   #FFFFFF;
  --md-sys-color-tertiary-container:            #E4E7AE;
  --md-sys-color-on-tertiary-container:         #1B1D00;

  --md-sys-color-error:                         #BA1A1A;
  --md-sys-color-on-error:                      #FFFFFF;
  --md-sys-color-error-container:               #FFDAD6;
  --md-sys-color-on-error-container:            #410002;

  --md-sys-color-background:                    #FFF8F4;
  --md-sys-color-on-background:                 #221A14;
  --md-sys-color-surface:                       #FFF8F4;
  --md-sys-color-on-surface:                    #221A14;
  --md-sys-color-surface-variant:               #F1DFD0;
  --md-sys-color-on-surface-variant:            #51453A;

  --md-sys-color-surface-container-lowest:      #FFFFFF;
  --md-sys-color-surface-container-low:         #FFF1E5;
  --md-sys-color-surface-container:             #FBEBDD;
  --md-sys-color-surface-container-high:        #F5E5D7;
  --md-sys-color-surface-container-highest:     #EFDFD1;

  --md-sys-color-surface-dim:                   #E5D9CC;
  --md-sys-color-surface-bright:                #FFF8F4;

  --md-sys-color-outline:                       #837469;
  --md-sys-color-outline-variant:               #D5C3B6;

  --md-sys-color-inverse-surface:               #382F28;
  --md-sys-color-inverse-on-surface:            #FFEEDF;
  --md-sys-color-inverse-primary:               #E5C2AF;

  --md-sys-color-shadow:                        #000000;
  --md-sys-color-scrim:                         #000000;

  /* Semantic tokens para gravedad/estado (Spazios-style mapping a MD3) */
  --tv-color-grav-1plus:                        #B3261E;
  --tv-color-grav-1:                            #C77800;
  --tv-color-grav-1minus:                       #B68900;
  --tv-color-grav-2:                            #1C6E3A;
  --tv-color-grav-3:                            #5F6368;

  --tv-color-success:                           #1C6E3A;
  --tv-color-success-container:                 #BFE9CA;
  --tv-color-warning:                           #B26D00;
  --tv-color-warning-container:                 #FFE0B2;
  --tv-color-info:                              #1A5FB4;
  --tv-color-info-container:                    #D1E4FF;

  /* ── Type system ────────────────────────────────────────────────────────── */
  --md-ref-typeface-brand:    'Playfair Display', Georgia, serif;
  --md-ref-typeface-plain:    'Lato', 'Segoe UI', Roboto, system-ui, sans-serif;

  --md-sys-typescale-display-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size:        3.5rem;
  --md-sys-typescale-display-large-weight:      600;
  --md-sys-typescale-display-large-tracking:    -0.015em;

  --md-sys-typescale-headline-large-font:       var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size:       2rem;
  --md-sys-typescale-headline-large-weight:     600;

  --md-sys-typescale-headline-medium-font:      var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size:      1.5rem;
  --md-sys-typescale-headline-medium-weight:    600;

  --md-sys-typescale-title-large-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-size:          1.25rem;
  --md-sys-typescale-title-large-weight:        500;

  --md-sys-typescale-title-medium-font:         var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size:         1rem;
  --md-sys-typescale-title-medium-weight:       500;
  --md-sys-typescale-title-medium-tracking:     0.009em;

  --md-sys-typescale-body-large-font:           var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size:           1rem;
  --md-sys-typescale-body-large-weight:         400;

  --md-sys-typescale-body-medium-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size:          0.875rem;
  --md-sys-typescale-body-medium-weight:        400;

  --md-sys-typescale-label-large-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size:          0.875rem;
  --md-sys-typescale-label-large-weight:        500;
  --md-sys-typescale-label-large-tracking:      0.007em;

  --md-sys-typescale-label-medium-font:         var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size:         0.75rem;
  --md-sys-typescale-label-medium-weight:       500;

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --md-sys-shape-corner-none:                   0;
  --md-sys-shape-corner-extra-small:            4px;
  --md-sys-shape-corner-small:                  8px;
  --md-sys-shape-corner-medium:                 12px;
  --md-sys-shape-corner-large:                  16px;
  --md-sys-shape-corner-extra-large:            28px;
  --md-sys-shape-corner-full:                   9999px;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.08);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0,0,0,.10), 0 4px 8px 3px rgba(0,0,0,.10);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0,0,0,.10), 0 6px 10px 4px rgba(0,0,0,.10);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0,0,0,.10), 0 8px 12px 6px rgba(0,0,0,.10);

  /* ── State layer opacities (MD3 spec) ───────────────────────────────────── */
  --md-sys-state-hover-opacity:        0.08;
  --md-sys-state-focus-opacity:        0.12;
  --md-sys-state-pressed-opacity:      0.12;
  --md-sys-state-dragged-opacity:      0.16;
}