/* ==========================================================================
   Churro — Spotahome Design System tokens
   Based on Tailwind v4 palette, with Spotahome brand accents.
   ========================================================================== */

/* ---- Brand fonts (uploaded) ---- */
@font-face {
  font-family: "Agrandir";
  src: url("../fonts/Agrandir-Regular.ttf") format("truetype"),
       url("../fonts/Agrandir-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  /* ---- Neutrals (Tailwind stone/neutral) ---- */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;

  /* ---- Orange (Spotahome warm accent) ---- */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #FB6E44; /* Spotahome primary orange */
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;
  --orange-950: #431407;

  /* ---- Indigo (Spotahome deep navy brand) ---- */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #302D9A;
  --indigo-950: #0A0777; /* Spotahome deep indigo */

  /* ---- Blue ---- */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #A3D1F0; /* Spotahome sky */
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* ---- Pink ---- */
  --pink-50:  #FDF2F8;
  --pink-100: #FCE7F3;
  --pink-200: #FFCCEF; /* Spotahome soft pink */
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --pink-700: #BE185D;
  --pink-800: #9D174D;
  --pink-900: #831843;
  --pink-950: #500724;

  /* ---- Red ---- */
  --red-50:  #FEF2F2;
  --red-100: #FFE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #7F1D1D;
  --red-900: #450A0A;
  --red-950: #2D0505;

  /* ---- Green ---- */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;

  /* ---- Yellow ---- */
  --yellow-50:  #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;

  /* ---- Semantic ---- */
  --bg:               var(--neutral-50);
  --surface:          #FFFFFF;
  --surface-muted:    var(--neutral-100);
  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --text:             var(--neutral-900);
  --text-muted:       var(--neutral-500);
  --text-subtle:      var(--neutral-600);
  --text-inverse:     #FFFFFF;

  --brand:            var(--indigo-950);
  --brand-fg:         #FFFFFF;
  --accent:           var(--orange-500);
  --accent-fg:        #FFFFFF;
  --success:          var(--green-600);
  --warning:          var(--yellow-500);
  --danger:           var(--red-500);
  --info:             var(--blue-500);

  /* ---- Typography ---- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --font-display: "Agrandir", "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows (Tailwind v4) ---- */
  --shadow-2xs: 0 1px 0 0 rgba(0,0,0,0.05);
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* ---- Spacing base ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
}

/* ---- Type scale ---- */
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.0;  letter-spacing: -0.02em; color: var(--text); }
.t-h2 { font-family: var(--font-sans); font-weight: 600; font-size: 36px; line-height: 1.1;  letter-spacing: -0.01em; color: var(--text); }
.t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: 30px; line-height: 1.2;  letter-spacing: -0.01em; color: var(--text); }
.t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text); }
.t-h5 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.3;  letter-spacing: -0.005em; color: var(--text); }
.t-p-lg        { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.55; letter-spacing: 0.005em; color: var(--text); }
.t-p-lg-medium { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.55; }
.t-p-lg-bold   { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.55; }
.t-p        { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0.005em; color: var(--text); }
.t-p-medium { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.55; }
.t-p-bold   { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.55; }
.t-p-sm        { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5;  letter-spacing: 0.005em; color: var(--text-subtle); }
.t-p-sm-medium { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.5;  color: var(--text); }
.t-p-mini        { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.5;  letter-spacing: 0.015em; color: var(--text-muted); }
.t-p-mini-medium { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.5;  }
.t-p-mini-bold   { font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 1.5;  }
.t-caption { font-family: var(--font-sans); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.t-mono    { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--text); }