/* ── tokens/fonts.css ── */
/* Territorio Gourmet — Webfonts
   Sourced from Google Fonts (substitutions flagged in readme.md).
   Cormorant Garamond → display / editorial serif
   Jost              → UI sans-serif
   STIX Two Text     → logo wordmark: "TERRITORIO"
   Poppins           → logo wordmark: "GOURMET"               */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Jost:wght@300;400;500;600;700&family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');


/* ── tokens/colors.css ── */
/* Territorio Gourmet — Color Tokens */

:root {

  /* ── Base Palette ─────────────────────────────────────── */

  /* Ink */
  --color-ink:           #0D0D0D;
  --color-ink-80:        #3A3530;
  --color-ink-60:        #6B6055;

  /* Navy — brand blue (extracted from Símbolo Azul) */
  --color-navy:          #2A3B4D;
  --color-navy-dark:     #1A2733;
  --color-navy-light:    #3D5570;
  --color-navy-muted:    #6A8099;

  /* White */
  --color-white:         #FFFFFF;

  /* Bone — warm off-white for text on dark (navy) backgrounds */
  --color-bone:          #EDE4D3;
  --color-bone-muted:    rgba(237, 228, 211, 0.65);
  --color-bone-faint:    rgba(237, 228, 211, 0.40);

  /* Cream / Parchment scale */
  --color-cream-50:      #FDFAF4;
  --color-cream-100:     #F5EFE3;
  --color-cream-200:     #E9E0CE;
  --color-cream-300:     #D6C9B4;
  --color-cream-400:     #BCB09A;
  --color-cream-500:     #9E9282;

  /* Earth — warm ochres & siennas */
  --color-earth-300:     #C8A87C;
  --color-earth-400:     #A8845A;
  --color-earth-500:     #7C6040;
  --color-earth-600:     #574030;
  --color-earth-700:     #372818;

  /* Terracotta — regional Argentine accent */
  --color-terracotta-300: #D4886A;
  --color-terracotta-400: #B86040;
  --color-terracotta-500: #8C3C1C;

  /* Gold — premium / curated */
  --color-gold-300:      #D6B870;
  --color-gold-400:      #B4924C;
  --color-gold-500:      #886C30;

  /* ── Semantic Aliases ─────────────────────────────────── */

  /* Backgrounds */
  --bg:                  var(--color-cream-50);
  --bg-muted:            var(--color-cream-100);
  --bg-subtle:           var(--color-cream-200);
  --bg-inverse:          var(--color-navy);
  --bg-ink:              var(--color-ink);

  /* Surfaces */
  --surface:             #FFFFFF;
  --surface-muted:       var(--color-cream-50);
  --surface-raised:      #FFFFFF;
  --surface-overlay:     rgba(13, 13, 13, 0.48);

  /* Text */
  --text-primary:        var(--color-ink);
  --text-secondary:      var(--color-ink-80);
  --text-muted:          var(--color-ink-60);
  --text-faint:          var(--color-cream-500);
  --text-inverse:        var(--color-bone);     /* cream-bone on dark, NOT pure white */
  --text-accent:         var(--color-navy);
  --text-warm:           var(--color-terracotta-500);
  --text-gold:           var(--color-gold-500);

  /* Borders */
  --border:              var(--color-cream-300);
  --border-strong:       var(--color-cream-400);
  --border-accent:       var(--color-navy);

  /* Interactive */
  --interactive:         var(--color-navy);
  --interactive-hover:   var(--color-navy-dark);
  --interactive-pressed: var(--color-navy-dark);
  --interactive-fg:      var(--color-bone);     /* button labels on navy */

  /* Accent warm */
  --accent-warm:         var(--color-terracotta-400);
  --accent-warm-hover:   var(--color-terracotta-500);
  --accent-gold:         var(--color-gold-400);
}


/* ── tokens/typography.css ── */
/* Territorio Gourmet — Typography Tokens */

:root {

  /* ── Font Families ────────────────────────────────────── */
  --font-serif:    'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-sans:     'Jost', 'system-ui', '-apple-system', sans-serif;
  --font-mono:     'Courier New', monospace; /* upload JetBrains Mono to upgrade */

  /* Logo wordmark families — use only for brand lockup */
  --font-logo-territorio: 'STIX Two Text', 'Georgia', serif;
  --font-logo-gourmet:    'Poppins', 'system-ui', sans-serif;

  /* ── Font Weights ─────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Type Scale ───────────────────────────────────────── */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-md:     1.125rem;   /* 18px */
  --text-lg:     1.25rem;    /* 20px */
  --text-xl:     1.5rem;     /* 24px */
  --text-2xl:    1.875rem;   /* 30px */
  --text-3xl:    2.25rem;    /* 36px */
  --text-4xl:    3rem;       /* 48px */
  --text-5xl:    3.75rem;    /* 60px */
  --text-6xl:    4.5rem;     /* 72px */

  /* ── Line Heights ─────────────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter Spacing ───────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ── Semantic Roles ───────────────────────────────────── */

  /* Display — editorial headings in serif */
  --type-display-font:      var(--font-serif);
  --type-display-weight:    var(--weight-semibold);
  --type-display-leading:   var(--leading-tight);
  --type-display-tracking:  var(--tracking-tight);

  /* Heading — section heads, card titles */
  --type-heading-font:      var(--font-serif);
  --type-heading-weight:    var(--weight-medium);
  --type-heading-leading:   var(--leading-snug);

  /* Label — UI labels, nav, buttons, tags */
  --type-label-font:        var(--font-sans);
  --type-label-weight:      var(--weight-medium);
  --type-label-tracking:    var(--tracking-wide);
  --type-label-transform:   uppercase;

  /* Body — prose, descriptions */
  --type-body-font:         var(--font-sans);
  --type-body-weight:       var(--weight-regular);
  --type-body-leading:      var(--leading-relaxed);

  /* Caption — metadata, provenance, small print */
  --type-caption-font:      var(--font-sans);
  --type-caption-weight:    var(--weight-light);
  --type-caption-tracking:  var(--tracking-wide);

  /* ── Logo Wordmark ────────────────────────────────────── */
  /* "TERRITORIO" — STIX Two Text, all-caps, tight tracking  */
  --type-logo-territorio-font:      var(--font-logo-territorio);
  --type-logo-territorio-weight:    var(--weight-regular);
  --type-logo-territorio-transform: uppercase;
  --type-logo-territorio-tracking:  var(--tracking-wide);

  /* "GOURMET" — Poppins, all-caps, generous tracking        */
  --type-logo-gourmet-font:         var(--font-logo-gourmet);
  --type-logo-gourmet-weight:       var(--weight-medium);
  --type-logo-gourmet-transform:    uppercase;
  --type-logo-gourmet-tracking:     var(--tracking-widest);
}


/* ── tokens/spacing.css ── */
/* Territorio Gourmet — Spacing Tokens
   Base unit: 4px. Scale is geometric. */

:root {

  /* ── Spacing Scale ────────────────────────────────────── */
  --space-0:    0px;
  --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;
  --space-40:   160px;
  --space-48:   192px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* ── Component Sizing ─────────────────────────────────── */
  --size-touch:  44px;    /* minimum tap target */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;

  /* ── Layout ───────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --layout-gutter:       var(--space-6);
  --layout-gutter-lg:    var(--space-10);
  --layout-section-gap:  var(--space-24);
}


/* ── tokens/shadows.css ── */
/* Territorio Gourmet — Shadow & Elevation Tokens
   Warm-tinted shadows (cream undertone) for an artisanal feel. */

:root {

  /* ── Elevation Shadows ────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(55, 40, 24, 0.06),
                 0 1px 3px rgba(55, 40, 24, 0.04);

  --shadow-md:   0 2px 4px rgba(55, 40, 24, 0.06),
                 0 4px 12px rgba(55, 40, 24, 0.08);

  --shadow-lg:   0 4px 8px rgba(55, 40, 24, 0.05),
                 0 12px 32px rgba(55, 40, 24, 0.10);

  --shadow-xl:   0 8px 16px rgba(55, 40, 24, 0.05),
                 0 24px 48px rgba(55, 40, 24, 0.12);

  /* ── Focus Ring ───────────────────────────────────────── */
  --focus-ring:  0 0 0 2px var(--color-cream-50),
                 0 0 0 4px var(--color-navy);

  /* ── Inset / Inner ────────────────────────────────────── */
  --shadow-inset: inset 0 1px 3px rgba(55, 40, 24, 0.10);

  /* ── Card Styles ──────────────────────────────────────── */
  --card-shadow:         var(--shadow-md);
  --card-shadow-hover:   var(--shadow-lg);
  --card-radius:         var(--radius-md);
  --card-border:         1px solid var(--border);
}


/* ── tokens/motion.css ── */
/* Territorio Gourmet — Motion Tokens
   Restrained, deliberate. No bounces; ease-out for entries, ease-in-out for transitions. */

:root {

  /* ── Durations ────────────────────────────────────────── */
  --duration-fast:    120ms; /* @kind other */
  --duration-base:    200ms; /* @kind other */
  --duration-slow:    340ms; /* @kind other */
  --duration-slower:  500ms; /* @kind other */

  /* ── Easing ───────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);  /* @kind other */
  --ease-in:          cubic-bezier(0.4, 0.0, 1,   1);  /* @kind other */
  --ease-in-out:      cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-gentle:      cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */

  /* ── Transitions (ready-made strings) ────────────────── */
  --transition-colors:    color var(--duration-base) var(--ease-gentle),
                          background-color var(--duration-base) var(--ease-gentle),
                          border-color var(--duration-base) var(--ease-gentle);

  --transition-shadow:    box-shadow var(--duration-base) var(--ease-gentle);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity:   opacity var(--duration-base) var(--ease-gentle);

  --transition-all:       var(--transition-colors), var(--transition-shadow);
}

/* ── Global Keyframes ─────────────────────────────────── */
/* Available to all components without re-declaring.       */

@keyframes tg-spin {
  to { transform: rotate(360deg); }
}

@keyframes tg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tg-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}